Results 1 to 6 of 6

Thread: Chained Animations in 6.6 Modern

  1. #1

    Default Answered: Chained Animations in 6.6 Modern

    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?

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

  3. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

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

  4. #3

    Default

    That's exactly what I ended up doing as a workaround . I'll report the bug. Thanks!

  5. #4
    Sencha Premium Member mcCrimson's Avatar
    Join Date
    Mar 2014
    Location
    hails from the 845
    Posts
    36
    Answers
    1

    Default

    This is still broken in 7..

  6. #5

    Default

    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.

  7. #6
    Sencha Premium User
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,255
    Answers
    27

    Default

    7.0 is same 6.6 codebase so expected.

Similar Threads

  1. Replies: 1
    Last Post: 5 Sep 2018, 11:42 AM
  2. Replies: 4
    Last Post: 25 May 2018, 1:01 AM
  3. Replies: 1
    Last Post: 8 Mar 2017, 6:01 PM
  4. Chained Store in ExtJS 6 modern
    By patrickclerc in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 1 Jun 2016, 8:56 AM
  5. [FIXED] Not all animations work for hide animations
    By sencha-noob in forum Sencha Touch 2.x: Bugs
    Replies: 12
    Last Post: 11 Apr 2012, 10:44 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •