Sencha touch 2 中的动画 Ext.Panel答案

【问题标题】：Animating Ext.Panel in Sencha touch 2Sencha touch 2 中的动画 Ext.Panel
【发布时间】：2013-02-12 20:21:25
【问题描述】：

我想要滑入这个视图：

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

由这个控制器渲染：

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

如何使用向上/向下滑动或类似的方式设置动画？尝试了一堆东西，但似乎没有任何效果。

感谢所有帮助！

【问题讨论】：

标签： javascript extjs sencha-touch sencha-touch-2

【解决方案1】：

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

hidden: true

然后您可以将showAnimation 和hideAnimation 应用到show 和hide 带有指定动画的模态，例如：

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

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

这是一个有效的小提琴：http://www.senchafiddle.com/#6tN6b

【讨论】：