aurelia / aurelia/animator-css
wrong classes applied when re-animating an element whose child elements are also animated
- Dominant language
- JavaScript
- Stars
- 44
- Forks
- 25
- PR merge metrics
- No merged PRs in 30d
Description
**I'm submitting a bug report**
* **Library Version:**
1.0.1
**Please tell us about your environment:**
* **Operating System:**
Windows 7
* **Node Version:**
6.9.4
* **NPM Version:**
4.1.2
* **Browser:**
all
**Current behavior:**
I am animating a custom element, that is using `if.bind` to add/remove from dom, with the `au-animate` and the `au-enter-active`, `au-leave-active` and `au-left`.
Plugin is configured with `useAnimationDoneClasses = true`.
The problem is that if i try to control child elements with theses classes (*that are applied to the custom element*), from the second time they are being wrongly applied. The `au-left` is re-added when the element finishes the show animation (*so it disappears again*).
For example
```
my-element.au-left{background-color:rgba(0,0,0,0)}
my-element.au-enter-active{animation:fade-in 400ms linear forwards;}
my-element.au-leave-active{animation:fade-in 400ms linear reverse;}
my-element.au-left article{transform:translateX(100%);}
my-element.au-enter-active article{animation:slide-in 399ms linear forwards;}
my-element.au-leave-active article{animation:slide-in 399ms linear reverse;}
```
Demo at https://plnkr.co/edit/pRGN9lyY34J4wdUlWopb?p=preview
As you can see the `article` is also animated based on the classes applied to the `my-element`. If you try to show the article (*in the demo*) a second time, once the show animation completes the `my-element` has both `au-entered` and `au-left` classes, and thus renders wrongly.
**Expected behavior:**
The element should never be with both `au-entered` and `au-left` classes applied at the same time.
Contributor guide
Research direction
Start with the linked Plunker demo and reproduce the second show animation using useAnimationDoneClasses = true. Trace how au-entered and au-left are applied to the custom element while its child article is animated. Done means the element never retains both au-entered and au-left after the show animation completes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100