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