Here is a plugin i developed for adding animations to items in a dataview.

(see example usage below)

/**
 * @author Sunny Jacob
 * @class Ext.plugin.DataviewAnimations
 * @extends Ext.plugin.Plugin
 * Description
 *
 *
 * @example
 *
 *
 *
 */
Ext.define('Ext.plugin.DataviewAnimations', {

    alias: 'plugin.dataviewanimations',

    defaultAnimationConfig: {
        easing: 'ease-in',
        duration: 500,
        delayAmount: 50,
        from: {
            opacity: 0
        },
        to: {
            opacity: 1
        }
    },

    config: {
        list: null
    },

    init: function (list)
        {
            this.initConfig();
            this.setList(list);
        },

    updateList: function (list)
        {
            if (list)
                {
                    list.doRefresh = Ext.Function.createSequence(list.doRefresh, this.animateItems, this);
                }
        },

    animateItems: function ()
        {
            debugger;

            var list = this.getList();

            var animations = [];

            var viewItems = list.getViewItems();

            Ext.each(viewItems, function (item, i)
            {

                if (Ext.isElement(item))
                    {

                        var animationConfig;

                        if (list.getAnimationConfig) animationConfig = list.getAnimationConfig() || {};

                        animationConfig = Ext.Object.merge({}, this.defaultAnimationConfig, animationConfig);

                        Ext.apply(animationConfig, {
                            element: item,
                            delay: animationConfig.delayAmount * i
                        });

                        animations.push(animationConfig);

                        //                        var ExtElement = Ext.get(item);
                    }
                else if (item instanceof Ext.dataview.component.DataItem) //else if (Ext.getClassName(item) === 'Ext.dataview.component.DataItem')
                    {
                        item.show(); //run predefined animation
                    }

            }, this);

            Ext.Animator.run(animations);

        }
});

example usage:

Ext.define('MyApp.MyDataView', {

    extend: 'Ext.dataview.DataView',

    xtype: 'videolist',

    requires: [
        'Ext.plugin.DataviewAnimations'
    ],

    config: {

        plugins:['dataviewanimations'],

        animationConfig:true,

        store: 'MyStore',

        cls: 'mylist',

        itemTpl: new Ext.XTemplate('<div style="background-image:url({picture});"></div>')

    },

    applyAnimationConfig:function()
        {
            return {
                    easing: 'ease-in',
                    duration: 5000,
                    delayAmount: 50,
                    from: {
                        opacity: 0
                    },
                    to: {
                        opacity: 0.5
                    }
                };
        },
});

 

let me know if you have any comments of suggestions