diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 1fa451acb3e..8edee190c30 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -152,95 +152,14 @@ Ionic Animations allows you to control the intermediate steps in an animation us Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods. -### Usage - -````mdx-code-block - - - -```javascript -createAnimation() - .addElement(document.querySelector('.square')) - .duration(3000) - .iterations(Infinity) - .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' } - ]); -``` - - - -```javascript -this.animationCtrl.create() - .addElement(this.square.nativeElement) - .duration(3000) - .iterations(Infinity) - .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' } - ]); -``` - - +import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md'; -```tsx - -... - -``` - - + -```javascript -import { createAnimation } from '@ionic/vue'; -import { ref } from 'vue'; - -... - -const squareRef = ref(); - -... - -createAnimation() - .addElement(squareRef.value) - .duration(3000) - .iterations(Infinity) - .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' } - ]); -``` - - -```` - -In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color. +In the example above, the card element will transition from its initial width, to a width defined by the `--width` variable, and then transition on to the final width. Each keyframe object contains an `offset` property. `offset` is a value between 0 and 1 that defines the keyframe step. Offset values must go in ascending order and cannot repeat. - - ## Grouped Animations 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. diff --git a/static/usage/v7/animations/keyframes/angular/example_component_html.md b/static/usage/v7/animations/keyframes/angular/example_component_html.md new file mode 100644 index 00000000000..035212f98d4 --- /dev/null +++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Card + +Play +Pause +Stop +``` diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md new file mode 100644 index 00000000000..4ee04bea423 --- /dev/null +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -0,0 +1,42 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard, IonCardContent } 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(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html new file mode 100644 index 00000000000..f7c0bb46175 --- /dev/null +++ b/static/usage/v7/animations/keyframes/demo.html @@ -0,0 +1,61 @@ + + + + + + Keyframe Animations + + + + + + + + + + +
+ + Card + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v7/animations/keyframes/index.md b/static/usage/v7/animations/keyframes/index.md new file mode 100644 index 00000000000..ccf03b4cdb4 --- /dev/null +++ b/static/usage/v7/animations/keyframes/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/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md new file mode 100644 index 00000000000..7a2e574b8da --- /dev/null +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -0,0 +1,20 @@ +```html + + Card + +Play +Pause +Stop + + +``` diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md new file mode 100644 index 00000000000..21d066b5404 --- /dev/null +++ b/static/usage/v7/animations/keyframes/react.md @@ -0,0 +1,47 @@ +```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(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + }, [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/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md new file mode 100644 index 00000000000..a0fc0e4505a --- /dev/null +++ b/static/usage/v7/animations/keyframes/vue.md @@ -0,0 +1,60 @@ +```html + + + + + +```