Skip to content

Commit 4face1f

Browse files
sean-perkinsdillionmegida
sean-perkins
and
dillionmegida
authored
docs(animations): add playground for chained animations (#3026)
Co-authored-by: dillionmegida <dillionmegida@gmail.com>
1 parent 2c7303e commit 4face1f

File tree

8 files changed

+475
-206
lines changed

8 files changed

+475
-206
lines changed

‎docs/utilities/animations.md‎

Lines changed: 2 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -443,213 +443,9 @@ See [Methods](#methods) for a complete list of hooks.
443443

444444
Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
445445

446-
### Usage
447-
448-
````mdx-code-block
449-
<Tabs
450-
groupId="framework"
451-
defaultValue="javascript"
452-
values={[
453-
{ value: 'javascript', label: 'JavaScript' },
454-
{ value: 'angular', label: 'Angular' },
455-
{ value: 'react', label: 'React' },
456-
{ value: 'vue', label: 'Vue' },
457-
]
458-
}>
459-
<TabItem value="javascript">
460-
461-
```javascript
462-
const squareA = createAnimation()
463-
.addElement(document.querySelector('.square-a'))
464-
.fill('none')
465-
.duration(1000)
466-
.keyframes([
467-
{ offset: 0, transform: 'scale(1) rotate(0)' },
468-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
469-
{ offset: 1, transform: 'scale(1) rotate(0)' }
470-
]);
471-
472-
const squareB = createAnimation()
473-
.addElement(document.querySelector('.square-b'))
474-
.fill('none')
475-
.duration(1000)
476-
.keyframes([
477-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
478-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
479-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
480-
]);
481-
482-
const squareC = createAnimation()
483-
.addElement(document.querySelector('.square-c'))
484-
.fill('none')
485-
.duration(1000)
486-
.keyframes([
487-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
488-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
489-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
490-
]);
491-
492-
await squareA.play();
493-
await squareB.play();
494-
await squareC.play();
495-
```
496-
</TabItem>
497-
<TabItem value="angular">
498-
499-
```javascript
500-
const squareA = this.animationCtrl.create()
501-
.addElement(this.squareA.nativeElement)
502-
.fill('none')
503-
.duration(1000)
504-
.keyframes([
505-
{ offset: 0, transform: 'scale(1) rotate(0)' },
506-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
507-
{ offset: 1, transform: 'scale(1) rotate(0)' }
508-
]);
509-
510-
const squareB = this.animationCtrl.create()
511-
.addElement(this.squareB.nativeElement)
512-
.fill('none')
513-
.duration(1000)
514-
.keyframes([
515-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
516-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
517-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
518-
]);
519-
520-
const squareC = this.animationCtrl.create()
521-
.addElement(this.squareC.nativeElement)
522-
.fill('none')
523-
.duration(1000)
524-
.keyframes([
525-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
526-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
527-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
528-
]);
529-
530-
await squareA.play();
531-
await squareB.play();
532-
await squareC.play();
533-
```
534-
</TabItem>
535-
<TabItem value="react">
536-
537-
```tsx
538-
private squareARef: React.RefObject<CreateAnimation> = React.createRef();
539-
private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
540-
private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
541-
542-
...
543-
544-
async componentDidMount() {
545-
const squareA = this.squareARef.current!.animation;
546-
const squareB = this.squareBRef.current!.animation;
547-
const squareC = this.squareCRef.current!.animation;
548-
549-
await squareA.play();
550-
await squareB.play();
551-
await squareC.play();
552-
}
553-
554-
render() {
555-
return (
556-
<>
557-
<CreateAnimation
558-
ref={this.squareARef}
559-
fill="none"
560-
duration={1000}
561-
keyframes={[
562-
{ offset: 0, transform: 'scale(1) rotate(0)' },
563-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
564-
{ offset: 1, transform: 'scale(1) rotate(0deg)' }
565-
]}
566-
>
567-
<div className="square"></div>
568-
</CreateAnimation>
569-
570-
<CreateAnimation
571-
ref={this.squareBRef}
572-
fill="none"
573-
duration={1000}
574-
keyframes={[
575-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
576-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
577-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
578-
]}
579-
>
580-
<div className="square"></div>
581-
</CreateAnimation>
582-
583-
<CreateAnimation
584-
ref={this.squareCRef}
585-
fill="none"
586-
duration={1000}
587-
keyframes={[
588-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
589-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
590-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
591-
]}
592-
>
593-
<div className="square"></div>
594-
</CreateAnimation>
595-
</>
596-
)
597-
}
598-
```
599-
</TabItem>
600-
<TabItem value="vue">
601-
602-
```javascript
603-
import { createAnimation } from '@ionic/vue';
604-
import { ref } from 'vue';
605-
606-
...
607-
608-
const squareARef = ref();
609-
const squareBRef = ref();
610-
const squareCRef = ref();
611-
612-
...
613-
614-
const squareA = createAnimation()
615-
.addElement(squareARef.value)
616-
.fill('none')
617-
.duration(1000)
618-
.keyframes([
619-
{ offset: 0, transform: 'scale(1) rotate(0)' },
620-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
621-
{ offset: 1, transform: 'scale(1) rotate(0)' }
622-
]);
623-
624-
const squareB = createAnimation()
625-
.addElement(squareBRef.value)
626-
.fill('none')
627-
.duration(1000)
628-
.keyframes([
629-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
630-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
631-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
632-
]);
633-
634-
const squareC = createAnimation()
635-
.addElement(squareCRef.value)
636-
.fill('none')
637-
.duration(1000)
638-
.keyframes([
639-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
640-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
641-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
642-
]);
643-
644-
await squareA.play();
645-
await squareB.play();
646-
await squareC.play();
647-
```
648-
</TabItem>
649-
</Tabs>
650-
````
446+
import Chain from '@site/static/usage/v7/animations/chain/index.md';
651447

652-
<Codepen user="ionic" slug="MWgGrwX" height="460" />
448+
<Chain />
653449

654450
## Gesture Animations
655451

‎static/usage/v7/animations/chain/angular/example_component_html.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-card>
3+
<ion-card-content>Card 1</ion-card-content>
4+
</ion-card>
5+
6+
<ion-card>
7+
<ion-card-content>Card 2</ion-card-content>
8+
</ion-card>
9+
10+
<ion-card>
11+
<ion-card-content>Card 3</ion-card-content>
12+
</ion-card>
13+
14+
<ion-button id="play" (click)="play()">Play</ion-button>
15+
<ion-button id="pause" (click)="pause()">Pause</ion-button>
16+
<ion-button id="stop" (click)="stop()">Stop</ion-button>
17+
```

‎static/usage/v7/animations/chain/angular/example_component_ts.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
```ts
2+
import { Component, ElementRef, ViewChildren } from '@angular/core';
3+
import type { QueryList } from '@angular/core';
4+
import type { Animation } from '@ionic/angular';
5+
import { AnimationController, IonCard } from '@ionic/angular';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
})
11+
export class ExampleComponent {
12+
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
13+
14+
private cardA: Animation;
15+
private cardB: Animation;
16+
private cardC: Animation;
17+
18+
constructor(private animationCtrl: AnimationController) {}
19+
20+
ngAfterViewInit() {
21+
this.cardA = this.animationCtrl
22+
.create()
23+
.addElement(this.cardElements.get(0).nativeElement)
24+
.fill('none')
25+
.duration(1000)
26+
.keyframes([
27+
{ offset: 0, transform: 'scale(1) rotate(0)' },
28+
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
29+
{ offset: 1, transform: 'scale(1) rotate(0)' },
30+
]);
31+
32+
this.cardB = this.animationCtrl
33+
.create()
34+
.addElement(this.cardElements.get(1).nativeElement)
35+
.fill('none')
36+
.duration(1000)
37+
.keyframes([
38+
{ offset: 0, transform: 'scale(1)', opacity: '1' },
39+
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
40+
{ offset: 1, transform: 'scale(1)', opacity: '1' },
41+
]);
42+
43+
this.cardC = this.animationCtrl
44+
.create()
45+
.addElement(this.cardElements.get(2).nativeElement)
46+
.fill('none')
47+
.duration(1000)
48+
.keyframes([
49+
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
50+
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
51+
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
52+
]);
53+
}
54+
55+
async play() {
56+
await this.cardA.play();
57+
await this.cardB.play();
58+
await this.cardC.play();
59+
}
60+
61+
pause() {
62+
this.cardA.pause();
63+
this.cardB.pause();
64+
this.cardC.pause();
65+
}
66+
67+
stop() {
68+
this.cardA.stop();
69+
this.cardB.stop();
70+
this.cardC.stop();
71+
}
72+
}
73+
```

0 commit comments

Comments
 (0)