show and animation

[hadrienl]

I'm submitting a bug report

• Library Version:
  1.0.0
• Operating System:
  OSX 10.x
• Node Version:
  6.2.0
• NPM Version:
  3.8.9
• JSPM OR Webpack AND Version
  CLI 1.0.0
• Browser:
  Chrome 52
• Language:
  ESNext

Current behavior:
I have an element with show.bind and au-animate class. When I toggle element, it doesn't animate correctly.

Here is my template:

<div
  show.bind="opened"
  class="dropdown-menu au-animate"
</div>

I have first tried with a transition:

.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;

  opacity: 1;
  transition: opacity 2s ease-in;

  &.aurelia-hide-add,
  &.aurelia-hide-remove {
    opacity: 0;
  }
}

It didn't works. I can see the aurelia-hide-remove apparition when breaking on attribute changes, but it's removed immediately and there is no transition.

Then, I tried with keyframes:

.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 1;

  &.aurelia-hide-add {
    animation: fadeOut .2s;
  }
  &.aurelia-hide-remove {
    animation: fadeIn .2s;
  }
}

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

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

It doesn't really worked. The aurelia-hide class come back at the end of the animation and then, aurelia-hide-add stays forever like you can see on the following screencast: https://www.dropbox.com/s/w4rwkgyabbcdb6r/aurelia-animation-bug.mov?dl=0

And a demo from a virgin project created with au-cli and latest aurelia-animator-css : https://gist.run/?id=5e8f73adb49480852b8100511429b41f

[hadrienl]

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

[hadrienl]

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

[EisenbergEffect]

@zewa666 Can you look into this?

[JoshHarris]

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.

[fracz]

+1

[illiusmedia]

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

[icegnome]

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

[nathanchase]

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

[dabide]

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.

[dabide]

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

[jordan-ware]

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.

[EisenbergEffect]

@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 :)

[jordan-ware]

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.

[jordan-ware]

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. 😄

[jordan-ware]

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.

[EisenbergEffect]

Thanks!

[davidGrocerKey]

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

[zewa666]

When you say Mac do you mean Safari @davidGrocerKey ?

[davidGrocerKey]

No, even on Chrome on Mac

[zewa666]

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