aurelia / aurelia/animator-css
Animation flickers
- Dominant language
- JavaScript
- Stars
- 44
- Forks
- 25
- PR merge metrics
- No merged PRs in 30d
Description
**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;
}
}
```
Contributor guide
Research direction
Reproduce the fade-out from the Aurelia animation documentation, then read src/animator.js around lines 289-305 and compare class cleanup with the later View.removeNodes() call. Trace the timing between those operations and verify that the element is not rendered fully visible after animation classes are removed and before node removal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100