modal-dialog - 使用 aui-modal 淡入/淡出模式

Question

我正在使用 YUI 和alloyUI 组件 aui-modal。这很好用，但如果它在打开时淡入视野并在关闭时淡出会更好。有谁知道我怎么能做到这一点？更好的是在打开时向下滑动，在关闭时滑出 - 类似于 jquery twitter Bootstrap 模式。这是我的代码：

<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

对于简单的淡入/淡出动画，您可以简单地将WidgetAnim插件插入到您的模态实例中。默认情况下，这将以 0.2 秒的持续时间淡入和淡出您的模态。

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

此外，您可以使用animShow和animHide属性更改默认的淡入淡出动画（请注意，您需要为此使用 'anim' 模块）：

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