Cancel current animation before to play another one

Author: jdnichollsc

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.4] - 2020-04-22
+### Fixed
+- Cancel current animation before to play another one, it's required to avoid issues when `iterations` was equal to `Infinity`.
+
 ## [1.1.3] - 2020-04-21
 ### Fixed
 - Restore class name from `onCancel` event and remove `previousAnimation` from Animation manager.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",

package.json

@@ -99,7 +99,7 @@ const easingOutCubic = EASING_FUNCTIONS[EASING.EASE_OUT_CUBIC];
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.1/dist/animatable-component.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.4/dist/animatable-component.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

readme.md

@@ -327,15 +327,15 @@ export class AnimatableComponent implements IAnimatableComponent {
   }
 
   componentDidLoad() {
-    this.manager.update();
+    this.manager.savedState();
   }
 
   componentWillUpdate() {
     this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
-    this.manager.update();
+    this.manager.savedState();
   }
 
   componentDidUnload() {

src/components/animatable-component/animatable-component.tsx

@@ -337,15 +337,15 @@ export class Cube implements IAnimatableComponent {
 
   componentDidLoad() {
     this.manager.setState(this.element, this);
-    this.manager.update();
+    this.manager.savedState();
   }
 
   componentWillUpdate() {
     this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
-    this.manager.update();
+    this.manager.savedState();
   }
 
   componentDidUnload() {

src/components/animatable-cube/animatable-cube.tsx

@@ -1127,7 +1127,6 @@ <h3>
     animatableCube.keyFrames = spinCube;
 
     function playAnimation (animation) {
-      currentAnimatable.destroy();
       if (animation) currentAnimatable.animation = animation;
       currentAnimatable.play();
     }
@@ -1184,7 +1183,7 @@ <h3>
     });
     button.addEventListener('click', function(e) {
       e.preventDefault();
-      const animation = selectAnimation.value
+      const animation = selectAnimation.value;
       currentAnimatable.animation = animation;
       currentAnimatable.play();
       animatableButton.play();
@@ -1198,7 +1197,6 @@ <h3>
       console.log('ANIMATION FINISH', event);
 
       //Remove listener and create my own infinity :)
-      animatable.destroy();
       animatable.autoPlay = false;
       animatable.removeEventListener("finish", startSecondAnimation);
       animatable.options = {

src/index.html

@@ -86,6 +86,7 @@ export class AnimationManager {
   private state: IAnimatable
   private animation: Animation = null
   private className: string
+  private isUpdatingState: boolean
 
   constructor(initState: IAnimatable) {
     this.state = initState;
@@ -126,28 +127,38 @@ export class AnimationManager {
     currentAnimation.cancel();
   }
 
+  /**
+   * Emit start event if playState is not running or playing a new animation.
+   */
   playAnimation() {
+    if (
+      this.currentAnimation.playState === 'running' &&
+      !this.isUpdatingState
+    ) return;
     /**
-     * Prevent emit start event if playState is running
+     * Cancel current animation before to create another one
      */
-    if (this.currentAnimation.playState === 'running') return;
-    this.onStartAnimation();
+    if (this.isUpdatingState) {
+      this.destroyAnimation();
+    }
     this.currentAnimation.play();
+    this.onStartAnimation();
   }
 
   setState(element: HTMLElement, newState: IAnimatable) {
+    this.isUpdatingState = true;
     this.element = element;
     this.state = newState;
   }
 
-  update() {
+  savedState() {
     /**
      * Check if `autoPlay` is enabled to play a new animation and emit the event.
      */
     if (this.state.autoPlay) {
-      this.destroyAnimation();
       this.playAnimation();
     }
+    this.isUpdatingState = false;
   }
 
   /**