extjs - ExtJS 窗口动画目标

Question

我正在使用animateTarget为窗口的显示和隐藏设置动画。但是我似乎无法为此设置任何动画选项，例如持续时间和缓动。

在这个特定的用例中，仅设置持续时间和缓动对我来说就足够了。

我正在使用 ExtJS 4.1

谢谢！

Answer 1

可以配置此动画，但不能仅将附加配置属性应用于Ext.window.Window创建时。动画是通过animate方法完成的，Ext.Element并且是Ext.fx.Anim 类型（有关配置详细信息，请参阅此链接）

您将需要扩展并Ext.window.Window覆盖私有事件处理程序。在这些中，您可以修改适当的配置。这是一个示例，我将持续时间从默认的 250 毫秒延长到 500 毫秒。这是一个有效的JSFiddle 生活演示afterShow()onHide()

Ext.define('Ext.ux.Window',{
  extend: 'Ext.window.Window',
  alias: 'widget.animatedwindow',
  initComponent: function() {
    this.callParent(arguments);
  },
  afterShow: function(animateTarget, cb, scope) {
        var me = this,
            fromBox,
            toBox,
            ghostPanel;

        // Default to configured animate target if none passed
        animateTarget = me.getAnimateTarget(animateTarget);

        // Need to be able to ghost the Component
        if (!me.ghost) {
            animateTarget = null;
        }
        // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
        if (animateTarget) {
            toBox = me.el.getBox();
            fromBox = animateTarget.getBox();
            me.el.addCls(me.offsetsCls);
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();

            // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
            ghostPanel.el.setX(-10000);

            me.ghostBox = toBox;
            ghostPanel.el.animate({
                from: fromBox,
                to: toBox,
                duration: 500,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        me.unghost();
                        delete me.ghostBox;
                        me.el.removeCls(me.offsetsCls);
                        me.onShowComplete(cb, scope);
                    }
                }
            });
        }
        else {
            me.onShowComplete(cb, scope);
        }
    },
    onHide: function(animateTarget, cb, scope) {
        var me = this,
            ghostPanel,
            toBox,
            activeEl = Ext.Element.getActiveElement();

        // If hiding a Component which is focused, or contains focus: blur the focused el. 
        if (activeEl === me.el || me.el.contains(activeEl)) {
            activeEl.blur();
        }

        // Default to configured animate target if none passed
        animateTarget = me.getAnimateTarget(animateTarget);

        // Need to be able to ghost the Component
        if (!me.ghost) {
            animateTarget = null;
        }
        // If we're animating, kick off an animation of the ghost down to the target
        if (animateTarget) {
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();
            toBox = animateTarget.getBox();
            ghostPanel.el.animate({
                to: toBox,
                duration: 500,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        ghostPanel.el.hide();
                        me.afterHide(cb, scope);
                    }
                }
            });
        }
        me.el.hide();
        if (!animateTarget) {
            me.afterHide(cb, scope);
        }
    }
});