diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 50c033cecca..1fa451acb3e 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -255,118 +255,13 @@ import Group from '@site/static/usage/v7/animations/group/index.md'; Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles. -### Usage - -````mdx-code-block - - - -```javascript -createAnimation() - .addElement(document.querySelector('.square')) - .duration(2000) - .beforeStyles({ - opacity: 0.2 - }) - .afterStyles({ - background: 'rgba(0, 255, 0, 0.5)' - }) - .afterClearStyles(['opacity']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' } - ]) -``` - - - -```javascript -this.animationCtrl.create() - .addElement(this.square.nativeElement) - .duration(2000) - .beforeStyles({ - opacity: 0.2 - }) - .afterStyles({ - background: 'rgba(0, 255, 0, 0.5)' - }) - .afterClearStyles(['opacity']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' } - ]) -``` - - - -```tsx - - ... - -``` - - - -```javascript -import { createAnimation } from '@ionic/vue'; -import { ref } from 'vue'; - -... - -const squareRef = ref(); - -... - -createAnimation() - .addElement(squareRef.value) - .duration(2000) - .beforeStyles({ - opacity: 0.2 - }) - .afterStyles({ - background: 'rgba(0, 255, 0, 0.5)' - }) - .afterClearStyles(['opacity']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' } - ]) -``` - - -```` - -In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared. +This example sets an inline filter which inverts the background color of the card by `75%` prior to the animation starting. Once the animation finishes, the box shadow on the element is set to `rgba(255, 0, 50, 0.4) 0px 4px 16px 6px`, a red glow, and the inline filter is cleared. The animation must be stopped in order to remove the box shadow and play it with the filter again. See [Methods](#methods) for a complete list of hooks. - +import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md'; + + ## Chained Animations diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md new file mode 100644 index 00000000000..c73e91cb471 --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md new file mode 100644 index 00000000000..36a7e22081a --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -0,0 +1,52 @@ +```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 card = this.animationCtrl + .create() + .addElement(this.cardElements.get(0).nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]); + + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v7/animations/before-and-after-hooks/demo.html b/static/usage/v7/animations/before-and-after-hooks/demo.html new file mode 100644 index 00000000000..30466c2bc93 --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/demo.html @@ -0,0 +1,74 @@ + + + + + + Animations + + + + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + + + diff --git a/static/usage/v7/animations/before-and-after-hooks/index.md b/static/usage/v7/animations/before-and-after-hooks/index.md new file mode 100644 index 00000000000..187ef590f4b --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/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/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md new file mode 100644 index 00000000000..262f8cd9803 --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md @@ -0,0 +1,28 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v7/animations/before-and-after-hooks/react.md b/static/usage/v7/animations/before-and-after-hooks/react.md new file mode 100644 index 00000000000..bae1185b19d --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/react.md @@ -0,0 +1,61 @@ +```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 card = useRef(); + + useEffect(() => { + if (!card.current) { + card.current = createAnimation() + .addElement(cardEl.current!) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]); + } + }, [cardEl]); + + const play = async () => { + await card.current?.play(); + }; + const pause = () => { + card.current?.pause(); + }; + const stop = () => { + card.current?.stop(); + }; + + return ( + <> + + Card + + + + Play + + + Pause + + + Stop + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/animations/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md new file mode 100644 index 00000000000..3b7463a8546 --- /dev/null +++ b/static/usage/v7/animations/before-and-after-hooks/vue.md @@ -0,0 +1,67 @@ +```html + + + +```