javascript - Sencha touch 2 中的动画 Ext.Panel

Question

我有一个我想滑入的 View :

Ext.define('GS.view.AddBidView', {
extend: 'Ext.Panel',
    config: {   
        xtype: 'panel',
        modal: true,
        width: '100%',
        height: '50%', 
        bottom: '0%',
        hideOnMaskTap: true,
        items: [{
            xtype: 'textareafield',
            name: 'bio',        
            clearIcon: false,
            id: 'textarea',
            placeHolder: 'Ange ditt bud här...'
        },
        {
            xtype:'button',
            text: 'Lägg bud',
            docked:'bottom',
            maxWidth: '95%',
            minHeight: '45px',
            cls: 'saveBidBtn'
        }]
    },
    initialize: function() {
        this.down('#textarea').on('keyup', this.grow, this);
        this.textarea = this.element.down('textarea');
        this.textarea.dom.style['overflow'] = 'hidden';
    },

    grow: function() {
        this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content
        this.getScrollable().getScroller().scrollToEnd();
    }
});

它由这个 Controller 渲染:

Ext.define('GS.controller.ShowModal', {
    extend : 'Ext.app.Controller',    
    config : {   
        control : {
            'button[action="showBidModal"]' : {
                tap : 'showModal'
            },
        }
    },
    showModal : function() {
        var addBidPanel = Ext.create('GS.view.AddBidView');
        Ext.Viewport.add(addBidPanel);
    }
});

我怎样才能用向上滑动/向下滑动或类似的方式制作动画？尝试了一堆东西，但似乎没有任何效果。

感谢所有帮助!

Answer 1

一种方法是默认隐藏模式:

hidden: true

然后就可以申请了showAnimation和 hideAnimation使用指定的动画显示和隐藏您的模式，例如:

showAnimation: {
    type: 'slideIn',
    duration: 1000,
    direction: 'down'
}, 

hideAnimation: {
    type: 'slideOut',
    duration: 1000,
    direction: 'up'
},  

这是一个有效的 fiddle :http://www.senchafiddle.com/#6tN6b