Animation flickers

[lorond]

I'm submitting a bug report

• Library Version: aurelia-animator-css 1.0.4 aurelia-bootstrapper 2.3.2 aurelia-cli 1.2.3

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 10.15.0

• NPM Version: 6.4.1

• Webpack Version webpack 4.41.5

• Browser: Chrome 79.0.3945.117 Firefox 72.0.1

• Language: all

Current behavior: There is a gap between css class list modification and DOM modifications. When implementing fade-out animation just like in https://aurelia.io/docs/plugins/animation/, element fades out, but just before removal it becomes fully visible for a moment.

From Chrome's profiler:

At the end of the animation corresponding classes are removed: https://github.com/aurelia/animator-css/blob/2528378d2e16418b2c6bf27aad11cf93c989a8da/src/animator.js#L289-L290

And the cleanup promise resolved: https://github.com/aurelia/animator-css/blob/2528378d2e16418b2c6bf27aad11cf93c989a8da/src/animator.js#L305

This in turn posts async message:

And there node actually get removed via View.removeNodes().

The problem is between animation classes removal and actual node removal, the DOM manages to recalculate and frame manages to render.

Workaround: The only option for now is to enable animation done classes (that is totally undocumented):

aurelia.use.plugin("aurelia-animator-css", c => c.useAnimationDoneClasses = true);

And add corresponding styles (also, contrary to examples, I guess it is good to preserve element's css property initial value, that can be defined by other styles - omitted from state is dynamically generated by the browser):

@keyframes FadeOut {
  to {
    opacity: 0;
  }
}

.animate-fade-out {
  &.au-left {
    opacity: 0;
  }

  &.au-leave-active {
    animation: 1500ms ease FadeOut;
  }
}

[EisenbergEffect]

@lorond Apologies for the inconvenience this caused. We're pretty hard at work on Aurelia 2 and we've been trying to avoid potential breaking changes on v1, so I'm a bit nervous about changing our implementation at this stage. As an alternative, it sounds like we could improve the documentation. Would you be willing to contribute a pull request to the animation documentation based on your experience? You can find the source here: https://github.com/aurelia/documentation/blob/master/current/en-us/7.%20plugins/6.%20animation.md

[zewa666]

@lorond you're absolutely right, animationDoneClasses are exactly there for these cases and they are totally undocumented. If you can create a PR for the docs as @EisenbergEffect mentioned I'll review it and help out with the details if needed.