show and animation about animator-css HOT 20 CLOSED

Seems I was off the mark with this issue - the problem is that classes are getting overlayed when show.bind changes during an animation. I'll have a look - show.bind may just need to manage this concurrent behavior and queue transitions a little better or there may be some change to the animator.

Will report back though I probably won't get time until the weekend.

from animator-css.

@zewa666 Can you look into this?

from animator-css.

We also discovered something like this with a show.bind when the animation ends aurelia-hide comes back. As stated above if.bind works just fine, but we cant use if.bind in this particular situation. Without the animation it works fine.

from animator-css.

I had the same problem but only with Firefox.
Made this workaround (instead of the show.bind-attribute):
<button class="au-animate ${myBool? 'aurelia-hide-add' : ''}">hidden button</button

CSS:
.aurelia-hide-add {
display: inline !important; /* TODO: Remove this later (firefox hack) */
-webkit-animation: fadeIn 1s;
-moz-animation: fadeIn 1s;
animation: fadeIn 1s;
}

.aurelia-hide-remove {
-webkit-animation: fadeOut 1s;
-moz-animation: fadeOut 1s;
animation: fadeOut 1s;
}

.au-animate {
/* TODO: Remove this style-block when it's possible to use aurelia-animator-css in Firefox */
display: none;
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-moz-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

@Keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@Keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
`}

from animator-css.

I'm still experiencing au-animate not working correctly on show.bind, did this issue just get dropped?

from animator-css.

Btw, no problem with if and its au-(enter|leave)(-active)?.

from animator-css.

#47 fixes animation when using .2s delay but with 2s it fails the same…

from animator-css.

+1

from animator-css.

Yeah, I don't see au-animate working on show.bind either - in aurelia-animator-css OR aurelia-animator-velocity.

from animator-css.

I just had a look at the source code: Aurelia searches for the first element in a view having an au-animate class. The configured animator implementation is then used: When the element is attached to the DOM, the enter() method is called on it, and when it is removed, the leave() method is called.

This means that when using show.bind, we need to handle the animation ourselves.

The Aurelia documentation is a bit lacking in this area.

from animator-css.

I looked a bit more, and in fact the animator is used by the show attribute to add and remove the aurelia-hide class. So perhaps I was wrong...

from animator-css.

Ok, so show.bind uses the animator removeClass() and addClass() methods, which take your class and run animations for {your-class}-add and {your-class}-remove. The show.bind calls this with the aureliaHideClassName constant: aurelia-hide.

So in your css you just have to add animations for those classes, e.g.:

.aurelia-hide-add {
    animation: fadeOut 0.3s ease-out;
}
.aurelia-hide-remove {
    animation: fadeIn 0.3s ease-out;
}

and make sure your element with the binding has au-animate, e.g.:
<p show.bind="someVMProperty" class="au-animate">animated text</p>

Tested and it works - hope this helps other people who stumble on this.

from animator-css.

@jordan-ware Thanks for being willing to dig into the code and share your findings with the community here. I apologize that this isn't well-documented. I'd love to see if we can improve this. Would anyone on this thread be interested in putting together a markdown file that explains how to use the CSS animation system? We could add that to our official documentation and give the author full credit of course :)

from animator-css.

Sorry for the delay, my schedules only really just lightened up. I've submitted a PR containing the fix. It appears there was a unit test for this, but it wasn't configured properly and was reporting a false positive.

The addClass/removeClass will now cancel the previous animation and pretty much start from the beginning of the latest animation triggered. I chose this over chaining the animations based on a comment I saw in the aurelia-templating repository about wanting to go in this direction.

Developers calling the addClass/removeClass methods can chain the promises naturally if they want to.

I'm interested in doing the documentation, I'll see what I can come up with. I'm not sure if I can be too timely with it so if anyone else is interested they may take the point. 😄

from animator-css.

I see the release containing this fix is now available on NPM.

I've upgraded my project and it has fixed the issue I was experiencing using show.bind.

Should be safe to close this now I think.

from animator-css.

Thanks!

from animator-css.

This still does not work on Mac, the '-add' and '-remove' are not being added to the 'aurelia-hide' class. On Windows, it does work
@EisenbergEffect

from animator-css.

When you say Mac do you mean Safari @davidGrocerKey ?

from animator-css.

No, even on Chrome on Mac

from animator-css.

Hmm that sounds weird. Perhaps you can share a minimal repro, I need to figure out meanwhile where to get a Mac

from animator-css.