From c36843ad9c61d6da116a2daabc98556e051d0a79 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 12 Jul 2023 08:52:14 -0400 Subject: [PATCH 1/6] Generate component --- .../angular/example_component_html.md | 3 +++ .../keyframes/angular/example_component_ts.md | 10 ++++++++ .../usage/v7/animations/keyframes/demo.html | 22 +++++++++++++++++ static/usage/v7/animations/keyframes/index.md | 24 +++++++++++++++++++ .../v7/animations/keyframes/javascript.md | 3 +++ static/usage/v7/animations/keyframes/react.md | 12 ++++++++++ static/usage/v7/animations/keyframes/vue.md | 16 +++++++++++++ 7 files changed, 90 insertions(+) create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_html.md create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/keyframes/demo.html create mode 100644 static/usage/v7/animations/keyframes/index.md create mode 100644 static/usage/v7/animations/keyframes/javascript.md create mode 100644 static/usage/v7/animations/keyframes/react.md create mode 100644 static/usage/v7/animations/keyframes/vue.md 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..24eba261880 --- /dev/null +++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` 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..da68ddf6245 --- /dev/null +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { +} +``` diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html new file mode 100644 index 00000000000..b72e2fbf6b7 --- /dev/null +++ b/static/usage/v7/animations/keyframes/demo.html @@ -0,0 +1,22 @@ + + + + + + Animations + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/animations/keyframes/index.md b/static/usage/v7/animations/keyframes/index.md new file mode 100644 index 00000000000..0219b527449 --- /dev/null +++ b/static/usage/v7/animations/keyframes/index.md @@ -0,0 +1,24 @@ +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..24eba261880 --- /dev/null +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md new file mode 100644 index 00000000000..e0afa8dcc48 --- /dev/null +++ b/static/usage/v7/animations/keyframes/react.md @@ -0,0 +1,12 @@ +```tsx +import React from 'react'; +import { IonAnimations } from '@ionic/react'; + +function Example() { + return ( + + ); +} +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..0f54c7bb5ea --- /dev/null +++ b/static/usage/v7/animations/keyframes/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` From 74ca5a565805e5391eb08c31a42202cf0b6981fe Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 12 Jul 2023 19:27:29 -0400 Subject: [PATCH 2/6] Build out animation playground --- docs/utilities/animations.md | 83 +------------------ .../angular/example_component_html.md | 5 +- .../keyframes/angular/example_component_ts.md | 34 +++++++- .../usage/v7/animations/keyframes/demo.html | 55 ++++++++++-- .../v7/animations/keyframes/javascript.md | 17 +++- static/usage/v7/animations/keyframes/react.md | 51 +++++++++++- static/usage/v7/animations/keyframes/vue.md | 57 ++++++++++++- 7 files changed, 202 insertions(+), 100 deletions(-) diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 1fa451acb3e..b3a1ee54f11 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -154,93 +154,14 @@ Hyphenated CSS properties should be written using camel case when writing keyfra ### 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' } - ]); -``` - - - -```tsx - -... - -``` - - - -```javascript -import { createAnimation } from '@ionic/vue'; -import { ref } from 'vue'; +import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md'; -... - -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. 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 index 24eba261880..507cec3270d 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_html.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md @@ -1,3 +1,6 @@ ```html - +
+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 index da68ddf6245..6c4016fd5b1 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,10 +1,42 @@ ```ts -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', }) export class ExampleComponent { + @ViewChild('square', { static: true }) square: ElementRef; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = 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' }, + ]); + } + + 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 index b72e2fbf6b7..a84f8b2883d 100644 --- a/static/usage/v7/animations/keyframes/demo.html +++ b/static/usage/v7/animations/keyframes/demo.html @@ -3,20 +3,59 @@ - Animations + Keyframe Animations + + + - - -
- -
- - +
+
+
+ Play + Pause + Stop +
+
diff --git a/static/usage/v7/animations/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md index 24eba261880..fe676f53e8a 100644 --- a/static/usage/v7/animations/keyframes/javascript.md +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -1,3 +1,18 @@ ```html - +
+Play +Pause +Stop + + ``` diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md index e0afa8dcc48..29cf930cfb6 100644 --- a/static/usage/v7/animations/keyframes/react.md +++ b/static/usage/v7/animations/keyframes/react.md @@ -1,12 +1,55 @@ ```tsx -import React from 'react'; -import { IonAnimations } from '@ionic/react'; +import React, { useEffect, useRef } from 'react'; +import { IonButton, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; function Example() { + const squareEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(squareEl.current!) + .duration(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, background: 'red' }, + { offset: 0.72, background: 'var(--background)' }, + { offset: 1, background: 'green' }, + ]); + } + }, [squareEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + return ( - + <> +
+ Play + Pause + Stop + ); } export default Example; ``` - diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md index 0f54c7bb5ea..ad57a03b3bb 100644 --- a/static/usage/v7/animations/keyframes/vue.md +++ b/static/usage/v7/animations/keyframes/vue.md @@ -1,16 +1,65 @@ ```html + + ``` From e333ce03220a6f84364243eb80e3fba563b52330 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 13 Jul 2023 10:14:50 -0400 Subject: [PATCH 3/6] Improve a11y of colors --- docs/utilities/animations.md | 2 +- .../v7/animations/keyframes/angular/example_component_ts.md | 2 +- static/usage/v7/animations/keyframes/demo.html | 2 +- static/usage/v7/animations/keyframes/javascript.md | 2 +- static/usage/v7/animations/keyframes/react.md | 2 +- static/usage/v7/animations/keyframes/vue.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index b3a1ee54f11..825aa697c3e 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -158,7 +158,7 @@ import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md'; -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 `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to an aqua background color. 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. diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index 6c4016fd5b1..248d1aea42e 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -23,7 +23,7 @@ export class ExampleComponent { .keyframes([ { offset: 0, background: 'red' }, { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' }, + { offset: 1, background: 'aqua' }, ]); } diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html index a84f8b2883d..9f47ef4ded6 100644 --- a/static/usage/v7/animations/keyframes/demo.html +++ b/static/usage/v7/animations/keyframes/demo.html @@ -18,7 +18,7 @@ .keyframes([ { offset: 0, background: 'red' }, { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' }, + { offset: 1, background: 'aqua' }, ]); document.querySelector('#play').addEventListener('click', () => { diff --git a/static/usage/v7/animations/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md index fe676f53e8a..4d30299313a 100644 --- a/static/usage/v7/animations/keyframes/javascript.md +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -12,7 +12,7 @@ .keyframes([ { offset: 0, background: 'red' }, { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' }, + { offset: 1, background: 'aqua' }, ]); ``` diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md index 29cf930cfb6..4029e74c2c9 100644 --- a/static/usage/v7/animations/keyframes/react.md +++ b/static/usage/v7/animations/keyframes/react.md @@ -17,7 +17,7 @@ function Example() { .keyframes([ { offset: 0, background: 'red' }, { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' }, + { offset: 1, background: 'aqua' }, ]); } }, [squareEl]); diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md index ad57a03b3bb..33ff9b9a75a 100644 --- a/static/usage/v7/animations/keyframes/vue.md +++ b/static/usage/v7/animations/keyframes/vue.md @@ -30,7 +30,7 @@ .keyframes([ { offset: 0, background: 'red' }, { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'green' }, + { offset: 1, background: 'aqua' }, ]); }); From cab6eb3d5584d12f8730825031ffc5ae6b984f3b Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 13 Jul 2023 10:35:27 -0400 Subject: [PATCH 4/6] Remove subheading --- docs/utilities/animations.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 825aa697c3e..75223776a45 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -152,8 +152,6 @@ 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 - import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md'; From ef5a11cf3d2922c58655c616ee700e96eecd0c5f Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 14 Jul 2023 14:00:57 -0400 Subject: [PATCH 5/6] Use IonCard instead of div --- .../angular/example_component_html.md | 4 +- .../keyframes/angular/example_component_ts.md | 12 +++--- .../usage/v7/animations/keyframes/demo.html | 19 ++++----- static/usage/v7/animations/keyframes/index.md | 1 + .../v7/animations/keyframes/javascript.md | 12 +++--- static/usage/v7/animations/keyframes/react.md | 28 +++++-------- static/usage/v7/animations/keyframes/vue.md | 42 ++++++++----------- 7 files changed, 54 insertions(+), 64 deletions(-) diff --git a/static/usage/v7/animations/keyframes/angular/example_component_html.md b/static/usage/v7/animations/keyframes/angular/example_component_html.md index 507cec3270d..5e27b667e24 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_html.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md @@ -1,5 +1,7 @@ ```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 index 248d1aea42e..e87c840eb2b 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,14 +1,14 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', }) export class ExampleComponent { - @ViewChild('square', { static: true }) square: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; private animation: Animation; @@ -17,13 +17,13 @@ export class ExampleComponent { ngAfterViewInit() { this.animation = this.animationCtrl .create() - .addElement(this.square.nativeElement) + .addElement(this.card.nativeElement) .duration(3000) .iterations(Infinity) .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'aqua' }, + { offset: 0, width: '80px' }, + { offset: 0.72, width: '160px' }, + { offset: 1, width: '240px' }, ]); } diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html index 9f47ef4ded6..63050753eda 100644 --- a/static/usage/v7/animations/keyframes/demo.html +++ b/static/usage/v7/animations/keyframes/demo.html @@ -12,13 +12,13 @@ import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js'; const animation = createAnimation() - .addElement(document.querySelector('.square')) + .addElement(document.querySelector('#card')) .duration(3000) .iterations(Infinity) .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'aqua' }, + { offset: 0, width: '80px' }, + { offset: 0.72, width: '160px' }, + { offset: 1, width: '240px' }, ]); document.querySelector('#play').addEventListener('click', () => { @@ -39,18 +39,17 @@ flex-direction: column; } - .square { - width: 100px; - height: 100px; - background: red; - --background: yellow; + ion-card { + width: 80px; }
-
+ + Card +
Play Pause diff --git a/static/usage/v7/animations/keyframes/index.md b/static/usage/v7/animations/keyframes/index.md index 0219b527449..ccf03b4cdb4 100644 --- a/static/usage/v7/animations/keyframes/index.md +++ b/static/usage/v7/animations/keyframes/index.md @@ -21,4 +21,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v7/animations/keyframes/demo.html" + devicePreview={true} /> diff --git a/static/usage/v7/animations/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md index 4d30299313a..a4911956d62 100644 --- a/static/usage/v7/animations/keyframes/javascript.md +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -1,18 +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 index 4029e74c2c9..3ff74785be9 100644 --- a/static/usage/v7/animations/keyframes/react.md +++ b/static/usage/v7/animations/keyframes/react.md @@ -1,26 +1,26 @@ ```tsx import React, { useEffect, useRef } from 'react'; -import { IonButton, createAnimation } from '@ionic/react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; import type { Animation } from '@ionic/react'; function Example() { - const squareEl = useRef(null); + const cardEl = useRef(null); const animation = useRef(null); useEffect(() => { if (animation.current === null) { animation.current = createAnimation() - .addElement(squareEl.current!) + .addElement(cardEl.current!) .duration(3000) .iterations(Infinity) .keyframes([ - { offset: 0, background: 'red' }, - { offset: 0.72, background: 'var(--background)' }, - { offset: 1, background: 'aqua' }, + { offset: 0, width: '80px' }, + { offset: 0.72, width: '160px' }, + { offset: 1, width: '240px' }, ]); } - }, [squareEl]); + }, [cardEl]); const play = () => { animation.current?.play(); @@ -34,17 +34,9 @@ function Example() { return ( <> -
+ + Card + Play Pause Stop diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md index 33ff9b9a75a..6b6408f21a4 100644 --- a/static/usage/v7/animations/keyframes/vue.md +++ b/static/usage/v7/animations/keyframes/vue.md @@ -1,13 +1,15 @@ ```html ``` From 266bc44e27424d588513b09f8504bb9af2456ac4 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 14 Jul 2023 14:08:42 -0400 Subject: [PATCH 6/6] Reintroduce css variable --- docs/utilities/animations.md | 2 +- .../v7/animations/keyframes/angular/example_component_html.md | 2 +- .../v7/animations/keyframes/angular/example_component_ts.md | 2 +- static/usage/v7/animations/keyframes/demo.html | 3 ++- static/usage/v7/animations/keyframes/javascript.md | 4 ++-- static/usage/v7/animations/keyframes/react.md | 4 ++-- static/usage/v7/animations/keyframes/vue.md | 3 ++- 7 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 75223776a45..8edee190c30 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -156,7 +156,7 @@ import Keyframes from '@site/static/usage/v7/animations/keyframes/index.md'; -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 an aqua 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. diff --git a/static/usage/v7/animations/keyframes/angular/example_component_html.md b/static/usage/v7/animations/keyframes/angular/example_component_html.md index 5e27b667e24..035212f98d4 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_html.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_html.md @@ -1,5 +1,5 @@ ```html - + Card Play diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index e87c840eb2b..4ee04bea423 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -22,7 +22,7 @@ export class ExampleComponent { .iterations(Infinity) .keyframes([ { offset: 0, width: '80px' }, - { offset: 0.72, width: '160px' }, + { offset: 0.72, width: 'var(--width)' }, { offset: 1, width: '240px' }, ]); } diff --git a/static/usage/v7/animations/keyframes/demo.html b/static/usage/v7/animations/keyframes/demo.html index 63050753eda..f7c0bb46175 100644 --- a/static/usage/v7/animations/keyframes/demo.html +++ b/static/usage/v7/animations/keyframes/demo.html @@ -17,7 +17,7 @@ .iterations(Infinity) .keyframes([ { offset: 0, width: '80px' }, - { offset: 0.72, width: '160px' }, + { offset: 0.72, width: 'var(--width)' }, { offset: 1, width: '240px' }, ]); @@ -41,6 +41,7 @@ ion-card { width: 80px; + --width: 160px; } diff --git a/static/usage/v7/animations/keyframes/javascript.md b/static/usage/v7/animations/keyframes/javascript.md index a4911956d62..7a2e574b8da 100644 --- a/static/usage/v7/animations/keyframes/javascript.md +++ b/static/usage/v7/animations/keyframes/javascript.md @@ -1,5 +1,5 @@ ```html - + Card Play @@ -13,7 +13,7 @@ .iterations(Infinity) .keyframes([ { offset: 0, width: '80px' }, - { offset: 0.72, width: '160px' }, + { offset: 0.72, width: 'var(--width)' }, { offset: 1, width: '240px' }, ]); diff --git a/static/usage/v7/animations/keyframes/react.md b/static/usage/v7/animations/keyframes/react.md index 3ff74785be9..21d066b5404 100644 --- a/static/usage/v7/animations/keyframes/react.md +++ b/static/usage/v7/animations/keyframes/react.md @@ -16,7 +16,7 @@ function Example() { .iterations(Infinity) .keyframes([ { offset: 0, width: '80px' }, - { offset: 0.72, width: '160px' }, + { offset: 0.72, width: 'var(--width)' }, { offset: 1, width: '240px' }, ]); } @@ -34,7 +34,7 @@ function Example() { return ( <> - + Card Play diff --git a/static/usage/v7/animations/keyframes/vue.md b/static/usage/v7/animations/keyframes/vue.md index 6b6408f21a4..a0fc0e4505a 100644 --- a/static/usage/v7/animations/keyframes/vue.md +++ b/static/usage/v7/animations/keyframes/vue.md @@ -32,7 +32,7 @@ .iterations(Infinity) .keyframes([ { offset: 0, width: '80px' }, - { offset: 0.72, width: '160px' }, + { offset: 0.72, width: 'var(--width)' }, { offset: 1, width: '240px' }, ]); }); @@ -54,6 +54,7 @@ ```