Skip to content

Commit 756ebca

Browse files
thetaPCdillionmegida
thetaPC
and
dillionmegida
authored
docs(animation): add playground for basic animations (#3031)
Co-authored-by: dillionmegida <[email protected]>
1 parent 718e779 commit 756ebca

File tree

8 files changed

+257
-75
lines changed

8 files changed

+257
-75
lines changed

‎docs/utilities/animations.md‎

Lines changed: 4 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -138,84 +138,13 @@ const animation = createAnimation()
138138

139139
## Basic Animations
140140

141-
### Usage
142-
143-
````mdx-code-block
144-
<Tabs
145-
groupId="framework"
146-
defaultValue="javascript"
147-
values={[
148-
{ value: 'javascript', label: 'JavaScript' },
149-
{ value: 'angular', label: 'Angular' },
150-
{ value: 'react', label: 'React' },
151-
{ value: 'vue', label: 'Vue' },
152-
]
153-
}>
154-
<TabItem value="javascript">
155-
156-
```javascript
157-
createAnimation()
158-
.addElement(document.querySelector('.square'))
159-
.duration(1500)
160-
.iterations(Infinity)
161-
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
162-
.fromTo('opacity', '1', '0.2');
163-
```
164-
</TabItem>
165-
<TabItem value="angular">
166-
167-
```javascript
168-
this.animationCtrl.create()
169-
.addElement(document.querySelector('.square'))
170-
.duration(1500)
171-
.iterations(Infinity)
172-
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
173-
.fromTo('opacity', '1', '0.2');
174-
```
175-
</TabItem>
176-
<TabItem value="react">
177-
178-
```tsx
179-
<CreateAnimation
180-
duration={1500}
181-
iterations={Infinity}
182-
fromTo={[
183-
{ property: 'transform', fromValue: 'translateX(0px)', toValue: 'translateX(100px)' },
184-
{ property: 'opacity', fromValue: '1', toValue: '0.2' }
185-
]}
186-
>
187-
...
188-
</CreateAnimation>
189-
```
190-
</TabItem>
191-
<TabItem value="vue">
192-
193-
```javascript
194-
import { createAnimation } from '@ionic/vue';
195-
import { ref } from 'vue';
196-
197-
...
198-
199-
const elementRef = ref();
200-
201-
...
202-
203-
createAnimation()
204-
.addElement(elementRef.value)
205-
.duration(1500)
206-
.iterations(Infinity)
207-
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
208-
.fromTo('opacity', '1', '0.2');
209-
```
210-
</TabItem>
211-
</Tabs>
212-
````
213-
214-
In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
141+
In the example below, an animation that changes the opacity on the `ion-card` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
215142

216143
By default, all Ionic Animations are paused until the `play` method is called.
217144

218-
<Codepen user="ionic" slug="bGbMojP" />
145+
import Basic from '@site/static/usage/v7/animations/basic/index.md';
146+
147+
<Basic />
219148

220149
## Keyframe Animations
221150

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

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

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
```ts
2+
import { Component, ElementRef, ViewChildren, ViewChild } 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+
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
14+
private animation: Animation;
15+
16+
constructor(private animationCtrl: AnimationController) {}
17+
18+
ngAfterViewInit() {
19+
this.animation = this.animationCtrl
20+
.create()
21+
.addElement(this.card.nativeElement)
22+
.duration(1500)
23+
.iterations(Infinity)
24+
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
25+
.fromTo('opacity', '1', '0.2');
26+
}
27+
28+
play() {
29+
this.animation.play();
30+
}
31+
32+
pause() {
33+
this.animation.pause();
34+
}
35+
36+
stop() {
37+
this.animation.stop();
38+
}
39+
}
40+
```

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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 animation = createAnimation()
16+
.addElement(document.querySelector('#card'))
17+
.duration(1500)
18+
.iterations(Infinity)
19+
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
20+
.fromTo('opacity', '1', '0.2');
21+
22+
document.querySelector('#play').addEventListener('click', () => {
23+
animation.play();
24+
});
25+
26+
document.querySelector('#pause').addEventListener('click', () => {
27+
animation.pause();
28+
});
29+
30+
document.querySelector('#stop').addEventListener('click', () => {
31+
animation.stop();
32+
});
33+
</script>
34+
35+
<style>
36+
.container {
37+
flex-direction: column;
38+
}
39+
40+
ion-card {
41+
width: 70%;
42+
}
43+
</style>
44+
</head>
45+
46+
<body>
47+
<div class="container">
48+
<ion-card id="card">
49+
<ion-card-content>Card</ion-card-content>
50+
</ion-card>
51+
52+
<div>
53+
<ion-button id="play">Play</ion-button>
54+
<ion-button id="pause">Pause</ion-button>
55+
<ion-button id="stop">Stop</ion-button>
56+
</div>
57+
</div>
58+
</body>
59+
</html>

‎static/usage/v7/animations/basic/index.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v7/animations/basic/demo.html"
24+
devicePreview={true}
25+
/>

‎static/usage/v7/animations/basic/javascript.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```html
2+
<ion-card id="card">
3+
<ion-card-content>Card</ion-card-content>
4+
</ion-card>
5+
6+
<ion-button id="play" onclick="animation.play()">Play</ion-button>
7+
<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
8+
<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
9+
10+
<script>
11+
var animation = createAnimation()
12+
.addElement(document.querySelector('#card'))
13+
.duration(1500)
14+
.iterations(Infinity)
15+
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
16+
.fromTo('opacity', '1', '0.2');
17+
</script>
18+
```

‎static/usage/v7/animations/basic/react.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
```tsx
2+
import React, { useEffect, useRef } from 'react';
3+
import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
4+
import type { Animation } from '@ionic/react';
5+
6+
function Example() {
7+
const cardEl = useRef<HTMLIonCardElement | null>(null);
8+
9+
const animation = useRef<Animation | null>(null);
10+
11+
useEffect(() => {
12+
if (animation.current === null) {
13+
animation.current = createAnimation()
14+
.addElement(cardEl.current!)
15+
.duration(1500)
16+
.iterations(Infinity)
17+
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
18+
.fromTo('opacity', '1', '0.2');
19+
}
20+
}, [cardEl]);
21+
22+
const play = () => {
23+
animation.current?.play();
24+
};
25+
const pause = () => {
26+
animation.current?.pause();
27+
};
28+
const stop = () => {
29+
animation.current?.stop();
30+
};
31+
32+
return (
33+
<>
34+
<IonCard ref={cardEl}>
35+
<IonCardContent>Card</IonCardContent>
36+
</IonCard>
37+
38+
<IonButton id="play" onClick={play}>
39+
Play
40+
</IonButton>
41+
<IonButton id="pause" onClick={pause}>
42+
Pause
43+
</IonButton>
44+
<IonButton id="stop" onClick={stop}>
45+
Stop
46+
</IonButton>
47+
</>
48+
);
49+
}
50+
export default Example;
51+
```

‎static/usage/v7/animations/basic/vue.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
```html
2+
<template>
3+
<ion-card ref="cardEl">
4+
<ion-card-content>Card</ion-card-content>
5+
</ion-card>
6+
7+
<ion-button id="play" @click="play()">Play</ion-button>
8+
<ion-button id="pause" @click="pause()">Pause</ion-button>
9+
<ion-button id="stop" @click="stop()">Stop</ion-button>
10+
</template>
11+
12+
<script lang="ts">
13+
import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
14+
import type { Animation } from '@ionic/vue';
15+
16+
import { defineComponent, ref, onMounted } from 'vue';
17+
18+
export default defineComponent({
19+
components: {
20+
IonButton,
21+
IonCard,
22+
IonCardContent,
23+
},
24+
setup() {
25+
const cardEl = ref(null);
26+
27+
let animation: Animation;
28+
29+
onMounted(() => {
30+
animation = createAnimation()
31+
.addElement(cardEl.value.$el)
32+
.duration(1500)
33+
.iterations(Infinity)
34+
.fromTo('transform', 'translateX(0px)', 'translateX(100px)')
35+
.fromTo('opacity', '1', '0.2');
36+
});
37+
38+
const play = () => animation.play();
39+
const pause = () => animation.pause();
40+
const stop = () => animation.stop();
41+
42+
return {
43+
play,
44+
pause,
45+
stop,
46+
cardEl,
47+
};
48+
},
49+
});
50+
</script>
51+
```

0 commit comments

Comments
 (0)