From 39ec528b970eb5232b65be2f5576db7d97394142 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 11 Jul 2023 13:09:37 -0700 Subject: [PATCH 1/2] docs(animation): add playground for basic animations Co-authored-by: dillionmegida --- docs/utilities/animations.md | 79 +------------------ .../basic/angular/example_component_html.md | 9 +++ .../basic/angular/example_component_ts.md | 40 ++++++++++ static/usage/v7/animations/basic/demo.html | 59 ++++++++++++++ static/usage/v7/animations/basic/index.md | 25 ++++++ .../usage/v7/animations/basic/javascript.md | 18 +++++ static/usage/v7/animations/basic/react.md | 51 ++++++++++++ static/usage/v7/animations/basic/vue.md | 51 ++++++++++++ 8 files changed, 255 insertions(+), 77 deletions(-) create mode 100644 static/usage/v7/animations/basic/angular/example_component_html.md create mode 100644 static/usage/v7/animations/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/basic/demo.html create mode 100644 static/usage/v7/animations/basic/index.md create mode 100644 static/usage/v7/animations/basic/javascript.md create mode 100644 static/usage/v7/animations/basic/react.md create mode 100644 static/usage/v7/animations/basic/vue.md diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 3ebcddb2835..7656b0b645b 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -138,84 +138,9 @@ const animation = createAnimation() ## Basic Animations -### Usage - -````mdx-code-block - - - -```javascript -createAnimation() - .addElement(document.querySelector('.square')) - .duration(1500) - .iterations(Infinity) - .fromTo('transform', 'translateX(0px)', 'translateX(100px)') - .fromTo('opacity', '1', '0.2'); -``` - - - -```javascript -this.animationCtrl.create() - .addElement(document.querySelector('.square')) - .duration(1500) - .iterations(Infinity) - .fromTo('transform', 'translateX(0px)', 'translateX(100px)') - .fromTo('opacity', '1', '0.2'); -``` - - - -```tsx - - ... - -``` - - - -```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'); -``` - - -```` - -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. - -By default, all Ionic Animations are paused until the `play` method is called. +import Basic from '@site/static/usage/v7/animations/basic/index.md'; - + ## 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 new file mode 100644 index 00000000000..3a27660393a --- /dev/null +++ b/static/usage/v7/animations/basic/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..e8a1dae1af8 --- /dev/null +++ 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; + + 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 new file mode 100644 index 00000000000..e8f014943bc --- /dev/null +++ b/static/usage/v7/animations/basic/demo.html @@ -0,0 +1,59 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v7/animations/basic/index.md b/static/usage/v7/animations/basic/index.md new file mode 100644 index 00000000000..3d29e4e8e59 --- /dev/null +++ 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'; + + diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md new file mode 100644 index 00000000000..369131ac39b --- /dev/null +++ b/static/usage/v7/animations/basic/javascript.md @@ -0,0 +1,18 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md new file mode 100644 index 00000000000..6767b71ead1 --- /dev/null +++ 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(null); + + const animation = useRef(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 ( + <> + + Card + + + + Play + + + Pause + + + Stop + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md new file mode 100644 index 00000000000..a0837b1b81e --- /dev/null +++ b/static/usage/v7/animations/basic/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` From 0e7e160b087a12db9c12163461d07add374ed5f8 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 11 Jul 2023 17:25:48 -0700 Subject: [PATCH 2/2] docs(animations): basic animation info --- docs/utilities/animations.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 7656b0b645b..50c033cecca 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -138,6 +138,10 @@ const animation = createAnimation() ## Basic Animations +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. + import Basic from '@site/static/usage/v7/animations/basic/index.md';