All Animation types enable you to control the duration of the entering and exiting animation effects.

To configure the duration, define the transitionEnterDuration or, respectively, the transitionExitDuration property. The passed value represents the duration of the animation in milliseconds.

  .content {
    width: 100px;
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
<div id="vueapp" class="vue-app">
    <div class="example">
                     <button class="k-button" @click="animate">Animate</button>
            <Slide :transition-enter-duration="800"
                <div v-if="show" class="content">CONTENT</div>
import { Slide } from '@progress/kendo-vue-animation';
Vue.component('Slide', Slide);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
             show: false
             this.show = !this.show;

In this article