Animation in Vue Dialog
02 Sep 202613 minutes to read
The Dialog can be animated during the open and close actions. The user can also customize the animation’s delay, duration, and effect.
| delay | The Dialog animation will start with the mentioned delay. |
| duration | Specifies the duration for the animation to complete one cycle. |
| effect |
Specifies the animation effect for Dialog open and close actions.
List of supported animation effects: 'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom' | 'None' If the user sets 'Fade' effect, then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect. |
In the below sample, Zoom effect is enabled. So, the Dialog will open with ZoomIn
and close with ZoomOut effects.
<template>
<div>
<div id="target" class="control-section">
<div id='customization'>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='Zoom'>Zoom</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipXDown'>FlipX Down</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipXUp'>FlipX Up</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipYLeft'>FlipY Left</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipYRight'>FlipY Right</ejs-button>
</div>
</div>
<ejs-dialog id='dialog' header='Animation Dialog'
content='The dialog is configured with animation effect. It is opened or closed with "Zoom In or Out" animation.'
showCloseIcon='true' :isModal='isModal' :animationSettings='animationSettings' width='285px' ref='dialogObj'
target='#target' :buttons='dlgButton'>
</ejs-dialog>
</div>
</div>
</template>
<script setup>
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { ref } from 'vue';
const dialogObj = ref(null);
const dlgButton = [{ 'click': () => { dialogObj.value.ej2Instances.hide(); }, buttonModel: { content: 'OK', isPrimary: true } }];
const isModal = true;
const animationSettings = { effect: 'Zoom' };
const buttonClick = (e) => {
var effect = e.target.getAttribute('id');
var txt = e.target.parentElement.innerText;
txt = (txt === 'Zoom In/Out') ? 'Zoom In or Out' : txt;
dialogObj.value.ej2Instances.content = 'The dialog is configured with animation effect. It is opened or closed with "' + txt + '" animation.';
dialogObj.value.ej2Instances.animationSettings = { effect: effect, duration: 400 };
setTimeout(() => {
dialogObj.value.ej2Instances.show();
}, 400);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#customization {
display: table;
margin: 0 auto;
}
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control-section {
height: 100%;
min-height: 340px;
}
.animate {
display: table-cell;
padding-left: 20px;
}
#customization .e-btn.e-outline:hover,
#customization .e-css.e-btn.e-outline:hover,
#customization .e-btn.e-outline:hover:focus,
#customization .e-css.e-btn.e-outline:hover:focus,
#customization .e-btn.e-outline:focus,
#customization .e-css.e-btn.e-outline:focus {
background-color: #ffffff;
border-color: #0078d6;
color: #0078d6;
outline: none;
}
</style><template>
<div>
<div id="target" class="control-section">
<div id='customization'>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='Zoom'>Zoom</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipXDown'>FlipX Down</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipXUp'>FlipX Up</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipYLeft'>FlipY Left</ejs-button>
</div>
<div class='animate'>
<ejs-button v-on:click='buttonClick' id='FlipYRight'>FlipY Right</ejs-button>
</div>
</div>
<ejs-dialog id='dialog' header='Animation Dialog'
content='The dialog is configured with animation effect. It is opened or closed with "Zoom In or Out" animation.'
showCloseIcon='true' :isModal='isModal' :animationSettings='animationSettings' width='285px' ref='dialogObj'
target='#target' :buttons='dlgButton'>
</ejs-dialog>
</div>
</div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-dialog": DialogComponent
},
data: function () {
return {
dlgButton: [{ 'click': () => { this.$refs.dialogObj.ej2Instances.hide(); }, buttonModel: { content: 'OK', isPrimary: true } }],
isModal: true,
animationSettings: { effect: 'Zoom' }
}
},
methods: {
buttonClick: function (e) {
var effect = e.target.getAttribute('id');
var txt = e.target.parentElement.innerText;
txt = (txt === 'Zoom In/Out') ? 'Zoom In or Out' : txt;
this.$refs.dialogObj.ej2Instances.content = 'The dialog is configured with animation effect. It is opened or closed with "' + txt + '" animation.';
this.$refs.dialogObj.ej2Instances.animationSettings = { effect: effect, duration: 400 };
setTimeout(() => {
this.$refs.dialogObj.ej2Instances.show();
}, 400);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#customization {
display: table;
margin: 0 auto;
}
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control-section {
height: 100%;
min-height: 340px;
}
.animate {
display: table-cell;
padding-left: 20px;
}
#customization .e-btn.e-outline:hover,
#customization .e-css.e-btn.e-outline:hover,
#customization .e-btn.e-outline:hover:focus,
#customization .e-css.e-btn.e-outline:hover:focus,
#customization .e-btn.e-outline:focus,
#customization .e-css.e-btn.e-outline:focus {
background-color: #ffffff;
border-color: #0078d6;
color: #0078d6;
outline: none;
}
</style>