The Animation is used to perform animation effects on HTML elements by running a sequence of frames.
Syncfusion Essential JS2 library supports animating the HTML elements using the animate method. This method adds the e-animate
, e-animation-id
attributes, and CSS style to the HTML element and removes them after the animation effect is completed.
The Animation
library supports different types of effects. The name property of the AnimationModel
is used to set the animation effect. Here is an example code snippet using the FadeOut
and ZoomOut
animation effects:
<template>
<div id='container'>
<div id='element1'></div>
<div id='element2'></div>
</div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var animation = new Animation();
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
}
}
</script>
<style>
#element1, #element2 {
background: #333333;
border: 1px solid #cecece;
box-sizing: border-box;
float: left;
height: 100px;
width:100px;
}
#element2 {
margin-left: 20px;
}
</style>
To know more about the types of animation effects, refer to the animation effects section.
The duration property of the Animation
class is used to set the duration of the animation effect. Here is an example code snippet using the animation effects with the duration of 5000
milliseconds:
<template>
<div id='container'>
<div id='element1'></div>
<div id='element2'></div>
</div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var animation = new Animation({ duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
}
}
</script>
<style>
#element1, #element2 {
background: #333333;
border: 1px solid #cecece;
box-sizing: border-box;
float: left;
height: 100px;
width:100px;
}
#element2 {
margin-left: 20px;
}
</style>
The delay property of the Animation
class is used to delay the start of the animation effect. Here is an example code snippet using the animation effects with the delay of 2000
milliseconds:
<template>
<div id='container'>
<div id='element1'></div>
<div id='element2'></div>
</div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var animation = new Animation({ delay: 2000, duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
}
}
</script>
<style>
#element1, #element2 {
background: #333333;
border: 1px solid #cecece;
box-sizing: border-box;
float: left;
height: 100px;
width:100px;
}
#element2 {
margin-left: 20px;
}
</style>