Skip to content

Commit 2c7303e

Browse files
liamdebeasiliamdebeasi
authored
docs(animation): add playground for group example (#3025)
1 parent 15817f4 commit 2c7303e

File tree

8 files changed

+408
-200
lines changed

8 files changed

+408
-200
lines changed

‎docs/utilities/animations.md

Lines changed: 3 additions & 200 deletions
Original file line numberDiff line numberDiff line change
@@ -316,208 +316,11 @@ Each keyframe object contains an `offset` property. `offset` is a value between
316316

317317
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.
318318

319-
### Usage
320-
321-
````mdx-code-block
322-
<Tabs
323-
groupId="framework"
324-
defaultValue="javascript"
325-
values={[
326-
{ value: 'javascript', label: 'JavaScript' },
327-
{ value: 'angular', label: 'Angular' },
328-
{ value: 'react', label: 'React' },
329-
{ value: 'vue', label: 'Vue' },
330-
]
331-
}>
332-
<TabItem value="javascript">
333-
334-
```javascript
335-
const squareA = createAnimation()
336-
.addElement(document.querySelector('.square-a'))
337-
.keyframes([
338-
{ offset: 0, transform: 'scale(1) rotate(0)' },
339-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
340-
{ offset: 1, transform: 'scale(1) rotate(45deg)' }
341-
]);
342-
343-
const squareB = createAnimation()
344-
.addElement(document.querySelector('.square-b'))
345-
.keyframes([
346-
{ offset: 0, transform: 'scale(1))', opacity: '1' },
347-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
348-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
349-
]);
350-
351-
const squareC = createAnimation()
352-
.addElement(document.querySelector('.square-c'))
353-
.duration(5000)
354-
.keyframes([
355-
{ offset: 0, transform: 'scale(1))', opacity: '0.5' },
356-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
357-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
358-
]);
359-
360-
const parent = createAnimation()
361-
.duration(2000)
362-
.iterations(Infinity)
363-
.addAnimation([squareA, squareB, squareC]);
364-
```
365-
366-
</TabItem>
367-
<TabItem value="angular">
368-
369-
```javascript
370-
const squareA = this.animationCtrl.create()
371-
.addElement(this.squareA.nativeElement)
372-
.keyframes([
373-
{ offset: 0, transform: 'scale(1) rotate(0)' },
374-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
375-
{ offset: 1, transform: 'scale(1) rotate(45deg)' }
376-
]);
377-
378-
const squareB = this.animationCtrl.create()
379-
.addElement(this.squareB.nativeElement)
380-
.keyframes([
381-
{ offset: 0, transform: 'scale(1))', opacity: '1' },
382-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
383-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
384-
]);
385-
386-
const squareC = this.animationCtrl.create()
387-
.addElement(this.squareC.nativeElement)
388-
.duration(5000)
389-
.keyframes([
390-
{ offset: 0, transform: 'scale(1))', opacity: '0.5' },
391-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
392-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
393-
]);
394-
395-
const parent = this.animationCtrl.create()
396-
.duration(2000)
397-
.iterations(Infinity)
398-
.addAnimation([squareA, squareB, squareC]);
399-
```
400-
401-
</TabItem>
402-
<TabItem value="react">
403-
404-
```tsx
405-
private parentRef: React.RefObject<CreateAnimation> = React.createRef();
406-
private squareARef: React.RefObject<CreateAnimation> = React.createRef();
407-
private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
408-
private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
409-
410-
...
411-
412-
componentDidMount() {
413-
const parent = this.parentRef.current!.animation;
414-
const squareA = this.squareARef.current!.animation;
415-
const squareB = this.squareBRef.current!.animation;
416-
const squareC = this.squareCRef.current!.animation;
417-
418-
parent.addAnimation([squareA, squareB, squareC]);
419-
}
420-
421-
render() {
422-
return (
423-
<>
424-
<CreateAnimation
425-
ref={this.parentRef}
426-
duration={2000}
427-
iterations={Infinity}
428-
></CreateAnimation>
429-
430-
<CreateAnimation
431-
ref={this.squareARef}
432-
keyframes={[
433-
{ offset: 0, transform: 'scale(1) rotate(0)' },
434-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
435-
{ offset: 1, transform: 'scale(1) rotate(0deg)' }
436-
]}
437-
>
438-
<div className="square"></div>
439-
</CreateAnimation>
440-
441-
<CreateAnimation
442-
ref={this.squareBRef}
443-
keyframes={[
444-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
445-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
446-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
447-
]}
448-
>
449-
<div className="square"></div>
450-
</CreateAnimation>
451-
452-
<CreateAnimation
453-
ref={this.squareCRef}
454-
duration={5000}
455-
keyframes={[
456-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
457-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
458-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
459-
]}
460-
>
461-
<div className="square"></div>
462-
</CreateAnimation>
463-
</>
464-
)
465-
}
466-
```
467-
468-
</TabItem>
469-
<TabItem value="vue">
470-
471-
```javascript
472-
import { createAnimation } from '@ionic/vue';
473-
import { ref } from 'vue';
474-
475-
...
476-
477-
const squareARef = ref();
478-
const squareBRef = ref();
479-
const squareCRef = ref();
480-
481-
...
482-
483-
const squareA = createAnimation()
484-
.addElement(squareARef.value)
485-
.keyframes([
486-
{ offset: 0, transform: 'scale(1) rotate(0)' },
487-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
488-
{ offset: 1, transform: 'scale(1) rotate(45deg)' }
489-
]);
490-
491-
const squareB = createAnimation()
492-
.addElement(squareBRef.value)
493-
.keyframes([
494-
{ offset: 0, transform: 'scale(1))', opacity: '1' },
495-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
496-
{ offset: 1, transform: 'scale(1)', opacity: '1' }
497-
]);
498-
499-
const squareC = createAnimation()
500-
.addElement(squareCRef.value)
501-
.duration(5000)
502-
.keyframes([
503-
{ offset: 0, transform: 'scale(1))', opacity: '0.5' },
504-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
505-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' }
506-
]);
507-
508-
const parent = createAnimation()
509-
.duration(2000)
510-
.iterations(Infinity)
511-
.addAnimation([squareA, squareB, squareC]);
512-
```
513-
514-
</TabItem>
515-
</Tabs>
516-
````
319+
This example shows 3 child animations controlled by a single parent animation. Animations `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set.
517320

518-
This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
321+
import Group from '@site/static/usage/v7/animations/group/index.md';
519322

520-
<Codepen user="ionic" slug="oNvdogM" height="460" />
323+
<Group />
521324

522325
## Before and After Hooks
523326

‎static/usage/v7/animations/group/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/group/angular/example_component_ts.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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 animation: Animation;
15+
16+
constructor(private animationCtrl: AnimationController) {}
17+
18+
ngAfterViewInit() {
19+
const cardA = this.animationCtrl
20+
.create()
21+
.addElement(this.cardElements.get(0).nativeElement)
22+
.keyframes([
23+
{ offset: 0, transform: 'scale(1) rotate(0)' },
24+
{ offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
25+
{ offset: 1, transform: 'scale(1) rotate(0) ' },
26+
]);
27+
28+
const cardB = this.animationCtrl
29+
.create()
30+
.addElement(this.cardElements.get(1).nativeElement)
31+
.keyframes([
32+
{ offset: 0, transform: 'scale(1)', opacity: '1' },
33+
{ offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
34+
{ offset: 1, transform: 'scale(1)', opacity: '1' },
35+
]);
36+
37+
const cardC = this.animationCtrl
38+
.create()
39+
.addElement(this.cardElements.get(2).nativeElement)
40+
.duration(5000)
41+
.keyframes([
42+
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
43+
{ offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
44+
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
45+
]);
46+
47+
this.animation = this.animationCtrl
48+
.create()
49+
.duration(2000)
50+
.iterations(Infinity)
51+
.addAnimation([cardA, cardB, cardC]);
52+
}
53+
54+
play() {
55+
this.animation.play();
56+
}
57+
58+
pause() {
59+
this.animation.pause();
60+
}
61+
62+
stop() {
63+
this.animation.stop();
64+
}
65+
}
66+
```

‎static/usage/v7/animations/group/demo.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Animation</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
<script type="module">
12+
import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
13+
window.createAnimation = createAnimation;
14+
15+
const cardA = createAnimation()
16+
.addElement(document.querySelector('#card-a'))
17+
.keyframes([
18+
{ offset: 0, transform: 'scale(1) rotate(0)' },
19+
{ offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
20+
{ offset: 1, transform: 'scale(1) rotate(0) ' },
21+
]);
22+
23+
const cardB = createAnimation()
24+
.addElement(document.querySelector('#card-b'))
25+
.keyframes([
26+
{ offset: 0, transform: 'scale(1)', opacity: '1' },
27+
{ offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
28+
{ offset: 1, transform: 'scale(1)', opacity: '1' },
29+
]);
30+
31+
const cardC = createAnimation()
32+
.addElement(document.querySelector('#card-c'))
33+
.duration(5000)
34+
.keyframes([
35+
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
36+
{ offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
37+
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
38+
]);
39+
40+
const animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
41+
42+
document.querySelector('#play').addEventListener('click', () => {
43+
animation.play();
44+
});
45+
46+
document.querySelector('#pause').addEventListener('click', () => {
47+
animation.pause();
48+
});
49+
50+
document.querySelector('#stop').addEventListener('click', () => {
51+
animation.stop();
52+
});
53+
</script>
54+
55+
<style>
56+
.container {
57+
flex-direction: column;
58+
}
59+
60+
ion-card {
61+
width: 70%;
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
<div class="container">
68+
<ion-card id="card-a">
69+
<ion-card-content>Card 1</ion-card-content>
70+
</ion-card>
71+
72+
<ion-card id="card-b">
73+
<ion-card-content>Card 2</ion-card-content>
74+
</ion-card>
75+
76+
<ion-card id="card-c">
77+
<ion-card-content>Card 3</ion-card-content>
78+
</ion-card>
79+
80+
<div>
81+
<ion-button id="play">Play</ion-button>
82+
<ion-button id="pause">Pause</ion-button>
83+
<ion-button id="stop">Stop</ion-button>
84+
</div>
85+
</div>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)