mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-18 01:50:36 +01:00
63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
|
## Usage with Javascript
|
||
|
|
|
||
|
|
You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const element = document.querySelector('.my-element');
|
||
|
|
element.classList.add('animate__animated', 'animate__bounceOutLeft');
|
||
|
|
```
|
||
|
|
|
||
|
|
You can detect when an animation ends:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const element = document.querySelector('.my-element');
|
||
|
|
element.classList.add('animate__animated', 'animate__bounceOutLeft');
|
||
|
|
|
||
|
|
element.addEventListener('animationend', () => {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
or change its duration:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const element = document.querySelector('.my-element');
|
||
|
|
element.style.setProperty('--animate-duration', '0.5s');
|
||
|
|
```
|
||
|
|
|
||
|
|
You can also use a simple function to add the animations classes and remove them automatically:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const animateCSS = (element, animation, prefix = 'animate__') =>
|
||
|
|
// We create a Promise and return it
|
||
|
|
new Promise((resolve, reject) => {
|
||
|
|
const animationName = `${prefix}${animation}`;
|
||
|
|
const node = document.querySelector(element);
|
||
|
|
|
||
|
|
node.classList.add(`${prefix}animated`, animationName);
|
||
|
|
|
||
|
|
// When the animation ends, we clean the classes and resolve the Promise
|
||
|
|
function handleAnimationEnd() {
|
||
|
|
node.classList.remove(`${prefix}animated`, animationName);
|
||
|
|
node.removeEventListener('animationend', handleAnimationEnd);
|
||
|
|
|
||
|
|
resolve('Animation ended');
|
||
|
|
}
|
||
|
|
|
||
|
|
node.addEventListener('animationend', handleAnimationEnd);
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
And use it like this:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
animateCSS('.my-element', 'animate__bounce');
|
||
|
|
|
||
|
|
// or
|
||
|
|
animateCSS('.my-element', 'animate__bounce').then((message) => {
|
||
|
|
// Do something after the animation
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
If you had a hard time understanding the previous function, have a look at [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const), [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
|