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

对于简单的fadeIn / fadeOut动画，您只需将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属性更改默认的淡入淡出动画（请注意，您需要使用＆＃39; anim＆＃39;模块）：< / p>

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

使用aui-modal淡入/淡出模态

1 个答案: