docs(animation): add playground for basic animations (#3031)

Co-authored-by: dillionmegida <[email protected]>
ionic-team · Jul 12, 2023 · 756ebca · 756ebca · vercel · Jul 12, 2023
1 parent 718e779
commit 756ebca
Show file tree

Hide file tree

Showing 8 changed files with 257 additions and 75 deletions.
diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
@@ -138,84 +138,13 @@ const animation = createAnimation()
 
 ## Basic Animations
 
-### Usage
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-createAnimation()
-  .addElement(document.querySelector('.square'))
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-this.animationCtrl.create()
-  .addElement(document.querySelector('.square'))
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-<CreateAnimation
-  duration={1500}
-  iterations={Infinity}
-  fromTo={[
-    { property: 'transform', fromValue: 'translateX(0px)', toValue: 'translateX(100px)' },
-    { property: 'opacity', fromValue: '1', toValue: '0.2' }
-  ]}
->
-  ...
-</CreateAnimation>
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const elementRef = ref();
-
-...
-
-createAnimation()
-  .addElement(elementRef.value)
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-</Tabs>
-````
-
-In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
+In the example below, an animation that changes the opacity on the `ion-card` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
 
 By default, all Ionic Animations are paused until the `play` method is called.
 
-<Codepen user="ionic" slug="bGbMojP" />
+import Basic from '@site/static/usage/v7/animations/basic/index.md';
+
+<Basic />
 
 ## Keyframe Animations
 

diff --git a/static/usage/v7/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+      .fromTo('opacity', '1', '0.2');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/basic/demo.html b/static/usage/v7/animations/basic/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/basic/index.md b/static/usage/v7/animations/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/animations/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+    .fromTo('opacity', '1', '0.2');
+</script>
+```
diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+          .fromTo('opacity', '1', '0.2');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```