Disabled Animations

The Animations allow you to enable or disable their showing or hiding effect.

The control over the disabled animation state results in an instant element display or its disappearance. By default, the Expand, Push, Reveal and Slide animations apply the showing or hiding effect. To disable these effects, set the enter or, respectively, the exit property to false.

<style>
  .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);
  }
  </style>
<div id="vueapp" class="vue-app">
   <div class="example">
       <div>
           <dl>
            <dt>
               <dl>
                   <input
                           type="checkbox"
                           id="enter"
                           class="k-checkbox"
                           name="enter"
                           v-model="enter"
                       />
                       <label for="enter" class="k-checkbox-label">
                           Enter:&nbsp;
                       </label>
                       <br />
                       <input
                           type="checkbox"
                           id="exit"
                           class="k-checkbox"
                           name="exit"
                           v-model="exit"
                       />
                       <label for="exit" class="k-checkbox-label">
                           Exit:&nbsp;
                       </label>
                   </dl>
               </dt>
               <dt>
                   Slide:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Slide :enter="enter" :exit="exit">
               <div v-if="show" class="content">CONTENT</div>
           </Slide>
       </div>
   </div>
</div>
import { Slide } from '@progress/kendo-vue-animation';
Vue.component('Slide', Slide);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
             show: false,
             enter: true,
             exit: true
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        }
    }
});

In this article