diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 50c033cecca..30b3c0350a6 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -702,104 +702,13 @@ In this example we are creating a track along which we can drag the `.square` el Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables. -### Usage - -```css -.square { - width: 100px; - height: 100px; - opacity: 0.5; - background: blue; - margin: 10px; - - --background: red; -} - -@media (prefers-color-scheme: dark) { - .square { - --background: green; - } -} -``` - -````mdx-code-block - - - -```javascript -createAnimation() - .addElement(document.querySelector('.square')) - .duration(1500) - .iterations(Infinity) - .direction('alternate') - .fromTo('background', 'blue', 'var(--background)'); -``` - - - -```javascript -this.animationCtrl.create() - .addElement(this.square.nativeElement) - .duration(1500) - .iterations(Infinity) - .direction('alternate') - .fromTo('background', 'blue', 'var(--background)'); -``` - - - -```tsx - -
- -``` - - - -```javascript -import { createAnimation } from '@ionic/vue'; -import { ref } from 'vue'; - -... - -const squareRef = ref(); - -... - -createAnimation() - .addElement(squareRef.value) - .duration(1500) - .iterations(Infinity) - .direction('alternate') - .fromTo('background', 'blue', 'var(--background)'); -``` - - -```` - This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change. Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener). - +import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md'; + + ## Overriding Ionic Component Animations diff --git a/static/usage/v7/animations/preference-based/angular/example_component_css.md b/static/usage/v7/animations/preference-based/angular/example_component_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v7/animations/preference-based/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v7/animations/preference-based/angular/example_component_html.md b/static/usage/v7/animations/preference-based/angular/example_component_html.md new file mode 100644 index 00000000000..1bd8875b1b3 --- /dev/null +++ b/static/usage/v7/animations/preference-based/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md new file mode 100644 index 00000000000..c0e383d5ec0 --- /dev/null +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```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', + styleUrls: ['./example.component.css'], +}) +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) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html new file mode 100644 index 00000000000..02edd9cd4f4 --- /dev/null +++ b/static/usage/v7/animations/preference-based/demo.html @@ -0,0 +1,71 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v7/animations/preference-based/index.md b/static/usage/v7/animations/preference-based/index.md new file mode 100644 index 00000000000..e4f2597a6df --- /dev/null +++ b/static/usage/v7/animations/preference-based/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.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'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v7/animations/preference-based/javascript.md b/static/usage/v7/animations/preference-based/javascript.md new file mode 100644 index 00000000000..8ad151afcf7 --- /dev/null +++ b/static/usage/v7/animations/preference-based/javascript.md @@ -0,0 +1,35 @@ +```html + + Card + + +Play +Pause +Stop + + + + +``` diff --git a/static/usage/v7/animations/preference-based/react/main_css.md b/static/usage/v7/animations/preference-based/react/main_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v7/animations/preference-based/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v7/animations/preference-based/react/main_tsx.md b/static/usage/v7/animations/preference-based/react/main_tsx.md new file mode 100644 index 00000000000..a46df596ed7 --- /dev/null +++ b/static/usage/v7/animations/preference-based/react/main_tsx.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'; + +import './main.css'; + +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) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + }, [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/preference-based/vue.md b/static/usage/v7/animations/preference-based/vue.md new file mode 100644 index 00000000000..db703ca5466 --- /dev/null +++ b/static/usage/v7/animations/preference-based/vue.md @@ -0,0 +1,68 @@ +```html + + + + + +```