diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index d53bfbca0e5..0a1e49c5fba 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -316,208 +316,11 @@ Each keyframe object contains an `offset` property. `offset` is a value between Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have completed. -### Usage - -````mdx-code-block - - - -```javascript -const squareA = createAnimation() - .addElement(document.querySelector('.square-a')) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(45deg)' } - ]); - -const squareB = createAnimation() - .addElement(document.querySelector('.square-b')) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' } - ]); - -const squareC = createAnimation() - .addElement(document.querySelector('.square-c')) - .duration(5000) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' } - ]); - -const parent = createAnimation() - .duration(2000) - .iterations(Infinity) - .addAnimation([squareA, squareB, squareC]); -``` - - - - -```javascript -const squareA = this.animationCtrl.create() - .addElement(this.squareA.nativeElement) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(45deg)' } - ]); - -const squareB = this.animationCtrl.create() - .addElement(this.squareB.nativeElement) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' } - ]); - -const squareC = this.animationCtrl.create() - .addElement(this.squareC.nativeElement) - .duration(5000) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' } - ]); - -const parent = this.animationCtrl.create() - .duration(2000) - .iterations(Infinity) - .addAnimation([squareA, squareB, squareC]); -``` - - - - -```tsx -private parentRef: React.RefObject = React.createRef(); -private squareARef: React.RefObject = React.createRef(); -private squareBRef: React.RefObject = React.createRef(); -private squareCRef: React.RefObject = React.createRef(); - -... - -componentDidMount() { - const parent = this.parentRef.current!.animation; - const squareA = this.squareARef.current!.animation; - const squareB = this.squareBRef.current!.animation; - const squareC = this.squareCRef.current!.animation; - - parent.addAnimation([squareA, squareB, squareC]); -} - -render() { - return ( - <> - - - -
- - - -
- - - -
- - - ) -} -``` - - - - -```javascript -import { createAnimation } from '@ionic/vue'; -import { ref } from 'vue'; - -... - -const squareARef = ref(); -const squareBRef = ref(); -const squareCRef = ref(); - -... - -const squareA = createAnimation() - .addElement(squareARef.value) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(45deg)' } - ]); - -const squareB = createAnimation() - .addElement(squareBRef.value) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' } - ]); - -const squareC = createAnimation() - .addElement(squareCRef.value) - .duration(5000) - .keyframes([ - { offset: 0, transform: 'scale(1))', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' } - ]); - -const parent = createAnimation() - .duration(2000) - .iterations(Infinity) - .addAnimation([squareA, squareB, squareC]); -``` - - - -```` +This example shows 3 child animations controlled by a single parent animation. Animations `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set. -This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set. +import Group from '@site/static/usage/v7/animations/group/index.md'; - + ## Before and After Hooks diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md new file mode 100644 index 00000000000..bb61611b10c --- /dev/null +++ b/static/usage/v7/animations/group/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop +``` diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md new file mode 100644 index 00000000000..63f7a7b2f7a --- /dev/null +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -0,0 +1,66 @@ +```ts +import { Component, ElementRef, ViewChildren } 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 { + @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const cardA = this.animationCtrl + .create() + .addElement(this.cardElements.get(0).nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0) ' }, + ]); + + const cardB = this.animationCtrl + .create() + .addElement(this.cardElements.get(1).nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = this.animationCtrl + .create() + .addElement(this.cardElements.get(2).nativeElement) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + this.animation = this.animationCtrl + .create() + .duration(2000) + .iterations(Infinity) + .addAnimation([cardA, cardB, cardC]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html new file mode 100644 index 00000000000..36a7b847c5d --- /dev/null +++ b/static/usage/v7/animations/group/demo.html @@ -0,0 +1,87 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card 1 + + + + Card 2 + + + + Card 3 + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v7/animations/group/index.md b/static/usage/v7/animations/group/index.md new file mode 100644 index 00000000000..5d312219efa --- /dev/null +++ b/static/usage/v7/animations/group/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/group/javascript.md b/static/usage/v7/animations/group/javascript.md new file mode 100644 index 00000000000..d6f671660e2 --- /dev/null +++ b/static/usage/v7/animations/group/javascript.md @@ -0,0 +1,46 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md new file mode 100644 index 00000000000..23b00bbee74 --- /dev/null +++ b/static/usage/v7/animations/group/react.md @@ -0,0 +1,81 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardAEl = useRef(null); + const cardBEl = useRef(null); + const cardCEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + const cardA = createAnimation() + .addElement(cardAEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0) ' }, + ]); + + const cardB = createAnimation() + .addElement(cardBEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = createAnimation() + .addElement(cardCEl.current!) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]); + } + }, [cardAEl, cardBEl, cardCEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card 1 + + + + Card 2 + + + + Card 3 + + + + Play + + + Pause + + + Stop + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md new file mode 100644 index 00000000000..4302f414bb6 --- /dev/null +++ b/static/usage/v7/animations/group/vue.md @@ -0,0 +1,83 @@ +```html + + + +```