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:

animator-css/src/animator.js

Lines 289 to 290 in 2528378

	classList.remove(auClassActive);
	classList.remove(auClass);

And the cleanup promise resolved:

animator-css/src/animator.js

Line 305 in 2528378

resolve(true);

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.