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() }
}
)
}
);