Types

The Animation components animate their content by using various animation effects.

The Animation package delivers the following types of animations:

Fade

The Fade Animation animates newly added children by using a fade-in 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>
                   Fade:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Fade>
               <div v-if="show" class="content">CONTENT</div>
           </Fade>
       </div>
   </div>
</div>
import { Fade } from '@progress/kendo-vue-animation';
Vue.component('Fade', Fade);

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

Expand

The Expand Animation animates the scaleY() or scaleX() CSS property of the container element.

<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>
                   Expand:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Expand>
               <div v-if="show" class="content">CONTENT</div>
           </Expand>
       </div>
   </div>
</div>
import { Expand } from '@progress/kendo-vue-animation';
Vue.component('Expand', Expand);

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

Push

The Push Animation slides the new component by pushing the old one out.

<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>
                   Push:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Push>
               <div v-if="show" class="content">CONTENT</div>
           </Push>
       </div>
   </div>
</div>
import { Push } from '@progress/kendo-vue-animation';
Vue.component('Push', Push);

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

Reveal

The Reveal Animation animates the height or width CSS property of the container element.

<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>
                   Reveal:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Reveal>
               <div v-if="show" class="content">CONTENT</div>
           </Reveal>
       </div>
   </div>
</div>
import { Reveal } from '@progress/kendo-vue-animation';
Vue.component('Reveal', Reveal);

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

Slide

The Slide Animation slides a single piece of content in a predefined direction.

<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: false
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        }
    }
});

In this article