Apply animation for buttons in Sencha Touch 2

In Sencha Touch 2, button component supports animation using showAnimation and hideAnimation configurations. These configuration will be applied when the button is hidden and shown in the viewport. Let's see the implementation followed by the browser output.

Code:

Ext.define('Experiment.view.Container2', {
    extend: 'Ext.Container',
    xtype: 'container2',

    config: {

        itemId: 'container2',
        html: 'Click the button',
        styleHtmlContent: true,

        items: [{

            xtype: 'button',
            text: 'Click Me',
            itemId: 'clickme',
            margin: 20,
            width: '60%',

            handler: function () {

                var me = this;
                var editButton = me.getParent().down('#editButton');
                var saveButton = me.getParent().down('#saveButton');

                if (editButton.isHidden()) {
                    editButton.show();
                } else {
                    editButton.hide();
                }

                if (saveButton.isHidden()) {
                    saveButton.show();
                } else {
                    saveButton.hide();
                }
            }
        }, {

            xtype: 'titlebar',
            docked: 'top',
            title: 'Button Animation Demo',
            ui: 'light',

            items: [{

                xtype: 'button',
                itemId: 'editButton',
                text: 'Edit',
                align: 'right',
                hidden: true,

                hideAnimation: {
                    type: 'fadeOut',
                    duration: 200
                },

                showAnimation: {
                    type: 'fadeIn',
                    duration: 200
                }

            }, {

                xtype: 'button',
                itemId: 'saveButton',
                text: 'Save',
                ui: 'sencha',
                align: 'right',
                hidden: true,

                hideAnimation: {
                    type: 'fadeOut',
                    duration: 200
                },

                showAnimation: {
                    type: 'fadeIn',
                    duration: 200
                }
            }]
        }]
    }
});

Output:

Here is the default view by accessing in the browser

By clicking Click Me button, both Edit and Save Button will be shown with appying animation fadeIn.

By clicking Click Me button, both Edit and Save Button will be hidden with appying animation fadeOut.

Hope, you enjoyed this Post.