fading in/out modal using aui-modal

Question

I'm using YUI and the alloyUI component aui-modal. This works fine but would be much nicer if it faded into view on open and faded out on close. Does anyone know how I can achieve this? Better yet would be to slide down on open and slideOut on close - similar to the jquery twitter Bootstrap modal. here is my code:

<div id="modal"></div>

YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal(
  {
    bodyContent: 'Modal body',
    centered: true,
    headerContent: '<h3>Modal header</h3>',
    modal: true,
    render: '#modal'
  }
).render();
});

Answer 1

For easy fadeIn/fadeOut animations, you can simply plug the WidgetAnim plugin to your modal instance. This will by default fade in and out your modal with a duration of 0.2 seconds.

<div id="modal"></div>

YUI().use('aui-modal', 'widget-anim', function(Y) {
    var modal = new Y.Modal(
        {
            bodyContent: 'Modal body',
            centered: true,
            headerContent: '<h3>Modal header</h3>',
            modal: true,
            render: '#modal'
        }
    ).render();

    modal.plug(Y.Plugin.WidgetAnim);
});

Additionally, you can change the default fade animation using the animShow and animHide attributes (note that you'll need the 'anim' module for this):

    modal.plug(
        Y.Plugin.WidgetAnim, 
        {
            duration: 0.5,
            animHide: new Y.Anim(
                {
                    duration: 0.5,
                    easing: Y.Easing.easeIn,
                    node: modal.get('boundingBox'),
                    to: { xy: [modal.get('boundingBox').getXY()[0], -500] }
                }
            ),
            animShow: new Y.Anim(
                {
                    duration: 0.5,
                    easing: Y.Easing.elasticOut,
                    from: { xy: [modal.get('boundingBox').getXY()[0], -500] },
                    node: modal.get('boundingBox'),
                    to: { xy: modal.get('boundingBox').getXY() }
                }
            )
        }
    );