Fix animation bug and refactor

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Next
 
+- Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
+- Updated `sl-animation` to stable
 - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)
 - Updated entry points in `package.json` to reflect new filenames generated by Stencil 2
 

docs/components/animation.md

@@ -25,7 +25,7 @@ To animate an element, wrap it in `<sl-animation>` and set a `name` and `duratio
 </style>
 ```
 
-?> The animation will only be applied to the first child element found in `<sl-animation>`.
+?> The animation will be applied only to the first child element found in `<sl-animation>`.
 
 ## Examples
 

src/components/animation/animation.tsx

@@ -4,7 +4,7 @@ import easings from './easings';
 
 /**
  * @since 2.0
- * @status experimental
+ * @status stable
  *
  * @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container.
  */
@@ -17,11 +17,6 @@ export class Animate {
   animation: Animation;
   hasStarted = false;
 
-  get element() {
-    const slot = this.host.shadowRoot.querySelector('slot');
-    return slot.assignedElements({ flatten: true })[0] as HTMLElement;
-  }
-
   @Element() host: HTMLSlAnimationElement;
 
   /** The name of the animation to use. */
@@ -105,6 +100,7 @@ export class Animate {
   connectedCallback() {
     this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
     this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
   }
 
   componentDidLoad() {
@@ -123,12 +119,23 @@ export class Animate {
     this.slCancel.emit();
   }
 
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+
   createAnimation() {
     const easing = easings.hasOwnProperty(this.easing) ? easings[this.easing] : this.easing;
     const keyframes = this.keyframes ? this.keyframes : animations[this.name];
+    const slot = this.host.shadowRoot.querySelector('slot');
+    const element = slot.assignedElements({ flatten: true })[0] as HTMLElement;
+
+    if (!element) {
+      return;
+    }
 
     this.destroyAnimation();
-    this.animation = this.element.animate(keyframes, {
+    this.animation = element.animate(keyframes, {
       delay: this.delay,
       direction: this.direction,
       duration: this.duration,
@@ -201,6 +208,6 @@ export class Animate {
   }
 
   render() {
-    return <slot />;
+    return <slot onSlotchange={this.handleSlotChange} />;
   }
 }