aurelia / aurelia/animator-css

Animation flickers

Open
#70 2 comments 1 reaction 0 assignees View on GitHub
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:
![image](https://user-images.githubusercontent.com/1833263/72151295-e2c85400-33b8-11ea-9a5e-8eab56877485.png)

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:
![image](https://user-images.githubusercontent.com/1833263/72153240-63d61a00-33be-11ea-80bf-11f8fef4c3dd.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.