aurelia / aurelia/animator-css

wrong classes applied when re-animating an element whose child elements are also animated

Open
#58 0 comments 0 reactions 0 assignees View on GitHub
bug
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.