在 Sencha Touch 中，是否可以同时使用滑动和淡入淡出动画？答案

【问题标题】：In Sencha Touch, Is it possible to use slide and fade animations at the same time?在 Sencha Touch 中，是否可以同时使用滑动和淡入淡出动画？
【发布时间】：2014-07-23 03:34:01
【问题描述】：

是否可以在show()时使用slideIn和fadeIn，在hide()时使用slideOut和fadeOut？

非常感谢任何帮助！谢谢！

【问题讨论】：

标签： animation extjs sencha-touch

【解决方案1】：

尝试使用 showAnimation 和 hideAnimation。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var p,
            button = Ext.create('Ext.Button', {
            text: 'Button',
            handler: function() {
                if (p) {
                    p.hide();
                }

                p = Ext.create('Ext.Panel', {
                    html: 'Floating Panel',

                    height: 200,
                    width: 200,
                    top: 100,
                    left: 100,
                    padding: 10,
                    hidden: true,
                    showAnimation: {
                        preserveEndState: true,
                        duration: 300,
                        easing: 'ease-out',
                        from: {
                            'opacity': 0,
                            'top': 0
                        },
                        to: {
                            'opacity': 1,
                            'top': 100
                        }
                    },

                    hideAnimation: {
                        preserveEndState: true,
                        duration: 300,
                        easing: 'ease-out',
                        from: {

                            'opacity': 1,
                            'top': 100
                        },
                        to: {
                            'opacity': 0,
                            'top': 0
                        }
                    }
                });
                c.add(p);
                p.show();
            }
        });

        var c = Ext.create('Ext.Container', {
            fullscreen: true,
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                items: [
                    button
                ]
            }]
        });
    }
});

另外，如果你需要自定义动画，你可以使用 Ext.Animator：

Ext.Animator.run({
    element: element,
    preserveEndState: true,
    duration: 300,
    easing: 'ease-out',
    to: {

    },
    onEnd: function () {

    }
});

【讨论】：