Remove transition-duration style after move?

[martypdx]

After completing a move animation, the [-vendor]-transition-duration style is still on the element, which will alter other interactions outside of move.js. Current workaround is to remove it by passing callback to final end().

Perhaps the top-level end() should remove this style as part of move.js?

[tj]

ah, yeah that sounds like a bug to me

[rstacruz]

Oh, I just sent a pull req on this which was just merged:

#10

Perhaps this issue can be closed now?

[martypdx]

Hmm, been awhile since I looked at this.

Strictly speaking the merge didn't include transition-duration, just transition and transition-property. Move also uses transition-timing-function and a few other ones.

Also, shouldn't the state of the element be restored to whatever it was, not necessarily null? Perhaps the best thing would be to store those at the start (and potentially remove them so they don't interfere with what Move does) and then put them back at the end. Move would then also be side-effect free after being run.

[sgreenfield]

This is still a bug. Currently working around it with a bit of a hack. Any time I use move.js, I have to append this to an animation.

      .end(function(){
        move('#example').duration(0).end(); //remove the duration property for bug 
      });

This is needed to avoid an unwanted trigger of the animation when later changing the css attributes after having already done an animation with move.js.

It would be nice to be able to destroy an instance of move.js, or at least have the duration removed.

[kimmobrunfeldt]

I have a situation where I animate button, and after animation I want the button to have CSS hover animation.

 move('#button')
    .rotate(360)  // Some animations
    .set('opacity', 0.75)
    .then()
        .set('opacity', 1)  
        .pop()
    .end(function() {
        // Now I want to add a CSS class which will add nice hover animation to
        // the button
        $('#button')
            .removeAttr('style')  // This removes stuff like -webkit-transform: rotate(360deg) from the style attribute
            .addClass('opacity-hover')

        // However the animation does not work since the animation duration was
        // set to 0ms by move.js: style="-webkit-transition: 0ms;"
    });

Now I cannot achieve this because the animation duration style properties are set to '0ms' in this line:

move.js/index.js

Line 515 in 879feca

this.el.style.oTransitionDuration = 0;

I fixed this by setting the style properties to empty string instead of 0.

[kimmobrunfeldt]

I created a quick pull request of how I fixed it myself. There might be other scenarios where my fix does not work at all.