diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 3ebcddb2835..50c033cecca 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -138,84 +138,13 @@ 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. +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'; + + ## 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 + + + +```