Configuration

To perform CSS transitions and animations when a Vue component enters or exits the DOM, the Animations use the Vue transitions.

The Animations wrap all components which will be animated and enclose every child element in an AnimationChild component.

Default Setup

The following example demonstrates how to animate a CONTENT element which is added to the Slide Animation with an entering effect. When CONTENT is removed, the element acquires a special animation effect.

<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>
                   Slide:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Slide>
               <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: true
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        }
    }
});

Animating Elements and Components

The Animations provide options for animating:

Entering Components

To the child component which enters the animation, the Animations set a {transitionName}-enter CSS class. Then, to start the animation, they add a {transitionName}-enter-active CSS class to the child.

The naming convention of the CSS class names is similar to the classes in the Transition component. For example, the Slide adds a k-slide-down-enter CSS class on enter and, in the next tick, adds a k-slide-down-enter-active to activate the transition.

Exiting Components

To the child component which exits the animation, the Animations set a {transitionName}-exit CSS class. Then, to start the animation, they add a {transitionName}-exit-active CSS class to the child.

The naming convention of the CSS class names similar to the classes from the Transition component. For example, the Slide adds a k-slide-down-exit CSS class on exit and, in the next tick, adds a k-slide-down-exit-active to activate the transition.

In this article