Chained Animations in 6.6 Modern

**alex.church** · 17 Oct 2018, 5:21 PM

I'm trying to execute a chain of animations using the ExtJS 6.6 Modern Toolkit. Specifically, I want to fade in an element, fade it out again after a delay, and then remove it from the DOM. I was trying to accomplish this with the following:

Code:

Ext.Anim.run(msgEl, 'fade', {
    out: false,
    after: () => {
        console.log('after fade in');
        
        Ext.Anim.run(msgEl, 'fade', {
            out: true,
            delay: 1500,
            after: () => { 
                console.log('after fade out');
                msgEl.remove();
            }
        });


    }
});

The problem is that BOTH "after" handlers are executed after the first animation, removing the element before the second animation even starts, let alone finishes. The following fiddle demonstrates the issue: https://fiddle.sencha.com/#view/editor&fiddle/2moa

Note that both console logs are output at the completion of the first animation. The durations used in the fiddle are deliberately extended to make it more obvious.

Is this a bug, or am I completely off-base with how to achieve this effect using ExtJS animations?

evant

Looks like a bug to me. The modern animation system is a little screwy in that regard. You may have some more success delaying running the next animation on a short timeout:

Code:

Ext.Anim.run(msgEl, 'fade', {
    out: false,
    after: () => {
        console.log('after fade in');
   
        setTimeout(() => {     
            Ext.Anim.run(msgEl, 'fade', {
                out: true,
                delay: 1500,
                after: () => { 
                    console.log('after fade out');
                    msgEl.remove();
                }
            });
        }, 1);
    }
});

**evant** · 17 Oct 2018, 10:46 PM

Looks like a bug to me. The modern animation system is a little screwy in that regard. You may have some more success delaying running the next animation on a short timeout:

Code:

Ext.Anim.run(msgEl, 'fade', {
    out: false,
    after: () => {
        console.log('after fade in');
   
        setTimeout(() => {     
            Ext.Anim.run(msgEl, 'fade', {
                out: true,
                delay: 1500,
                after: () => { 
                    console.log('after fade out');
                    msgEl.remove();
                }
            });
        }, 1);
    }
});

**alex.church** · 18 Oct 2018, 2:01 PM

That's exactly what I ended up doing as a workaround

. I'll report the bug. Thanks!

**mcCrimson** · 24 Oct 2019, 8:26 AM

This is still broken in 7..

**alex.church** · 24 Oct 2019, 6:46 PM

Yep, as are many other long-standing bugs. I'd love to see Sencha issue more "bugfix" releases between major versions - 7.0.1, 7.0.2, etc. But I won't hold my breath.