Fixed issue from destroy method

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.2] - 2020-04-21
+### Fixed
+- Fixed issue from `destroy` method by using `cancel` instead of `finish`.
+
 ## [1.1.1] - 2020-04-19
 ### Fixed
 - Fixed dependencies of the package.

package.json

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

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

@@ -291,12 +291,7 @@ export class AnimatableComponent implements IAnimatableComponent {
    */
   @Method()
   async play(): Promise<void> {
-    /**
-     * Prevent emit start event if playState is running
-     */
-    if (this.manager.currentAnimation.playState === 'running') return;
-    this.manager.onStartAnimation();
-    return this.manager.currentAnimation.play();
+    this.manager.playAnimation();
   }
 
   /**
@@ -320,11 +315,7 @@ export class AnimatableComponent implements IAnimatableComponent {
    */
   @Method()
   async destroy(): Promise<void> {
-    const currentAnimation = this.manager.currentAnimation;
-    await this.clear();
-    if (this.iterations !== Infinity) {
-      currentAnimation.finish();
-    }
+    this.manager.destroyAnimation();
   }
 
   /**
@@ -336,7 +327,6 @@ export class AnimatableComponent implements IAnimatableComponent {
 
   componentDidLoad() {
     this.manager.setState(this.element, this);
-    this.manager.autoPlay();
   }
 
   /**
@@ -348,7 +338,6 @@ export class AnimatableComponent implements IAnimatableComponent {
 
   componentDidUpdate() {
     this.manager.setState(this.element, this);
-    this.manager.autoPlay();
   }
 
   componentDidUnload() {

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

@@ -301,12 +301,7 @@ export class Cube implements IAnimatableComponent {
    */
   @Method()
   async play(): Promise<void> {
-    /**
-     * Prevent emit start event if playState is running
-     */
-    if (this.manager.currentAnimation.playState === 'running') return;
-    this.manager.onStartAnimation();
-    return this.manager.currentAnimation.play();
+    this.manager.playAnimation();
   }
 
   /**
@@ -330,11 +325,7 @@ export class Cube implements IAnimatableComponent {
    */
   @Method()
   async destroy(): Promise<void> {
-    const currentAnimation = this.manager.currentAnimation;
-    await this.clear();
-    if (this.iterations !== Infinity) {
-      currentAnimation.finish();
-    }
+    this.manager.destroyAnimation();
   }
 
   /**
@@ -346,7 +337,6 @@ export class Cube implements IAnimatableComponent {
 
   componentDidLoad() {
     this.manager.setState(this.element, this);
-    this.manager.autoPlay();
   }
 
   /**
@@ -358,7 +348,6 @@ export class Cube implements IAnimatableComponent {
 
   componentDidUpdate() {
     this.manager.setState(this.element, this);
-    this.manager.autoPlay();
   }
 
   componentDidUnload() {

src/index.html

@@ -12,19 +12,19 @@
   </script>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-  <meta name="description" content="Animate things using Web Components and Web Animations API" />
+  <meta name="description" content="Animate any HTML element using Web Components and Web Animations API" />
 
   <!--  Essential META Tags -->
   <meta property="og:site_name" content="Proyecto 26">
   <meta property="og:title" content="A WebComponent to use Web Animations API in a declarative way! 💅" />
   <meta property="og:url" content="https://proyecto26.github.io/animatable-component" />
-  <meta property="og:description" content="Animate things using Web Components and Web Animations API" />
+  <meta property="og:description" content="Animate any HTML element using Web Components and Web Animations API" />
   <meta property="og:image" content="https://raw.githubusercontent.com/proyecto26/animatable-component/master/img/animatable.png" />
 
   <!--  Non-Essential, But Recommended -->
   <meta name="twitter:title" content="A WebComponent to use Web Animations API in a declarative way! 💅">
-  <meta name="twitter:description" content="Animate things using Web Components and Web Animations API">
-  <meta name="twitter:card" value="Animate things using Web Components and Web Animations API">
+  <meta name="twitter:description" content="Animate any HTML element using Web Components and Web Animations API">
+  <meta name="twitter:card" value="Animate any HTML element using Web Components and Web Animations API">
   <meta name="twitter:site" content="@proyecto26">
   <meta name="twitter:creator" content="@jdnichollsc">
 

src/utils/waapi.ts

@@ -85,6 +85,7 @@ export class AnimationManager {
   private element: HTMLElement
   private state: IAnimatable
   private animation: Animation = null
+  private previousAnimation: Animation = null 
 
   get currentAnimation(): Animation {
     return this.animation || this.loadAnimation();
@@ -114,19 +115,33 @@ export class AnimationManager {
     this.animation = null;
   }
 
+  destroyAnimation() {
+    const currentAnimation = this.previousAnimation || this.animation;
+    if (currentAnimation !== null) {
+      currentAnimation.removeEventListener('finish', this.onFinishAnimation);
+      currentAnimation.removeEventListener('cancel', this.onCancelAnimation);
+      currentAnimation.cancel();
+    }
+  }
+
+  playAnimation() {
+    /**
+     * Prevent emit start event if playState is running
+     */
+    if (this.currentAnimation.playState === 'running') return;
+    this.onStartAnimation();
+    this.currentAnimation.play();
+  }
+
   setState(element: HTMLElement, newState: IAnimatable) {
     this.element = element;
     this.state = newState;
-  }
 
-  /**
-   * Check if `autoPlay` is enabled to emit the event and play the animation
-   */
-  autoPlay() {
-    if (this.state.autoPlay) {
-      this.onStartAnimation();
-      this.currentAnimation.play();
-    }
+    this.previousAnimation = this.currentAnimation;
+    /**
+     * Check if `autoPlay` is enabled to emit the event and play the animation
+     */
+    if (this.state.autoPlay) this.playAnimation();
   }
 
   onStartAnimation = () => {