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 evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    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);
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  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 dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,246
    Answers
    26

    Default

    7.0 is same 6.6 codebase so expected.
    Cloud Application Architect

    Sencha Specialist / Sencha MVP / Sencha Technical Trainer
    ExtJs Developer + Contributor since 0.2.2 - Champion of the per developer license.

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. [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
  •