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

[gpetrioli]

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.