Customization

Animations enable you to customize their behavior by configuring the Animation component.

To update the Animation effect, use the transition-name property. The property defines the class name that is added to the enter or exit elements.

Entering Animations

To configure the entering animation, define the CSS classes by using the following syntax:

.{transitionName}-enter {
   /* The class that will be added on initial render of the element */
 }

 .{transitionName}-enter-active {
   /* The class that will be added after one time-frame(~16ms) to initiate the transition */
 }

The following example demonstrates how to create a custom entering animation.

<style>
    .custom-animation-enter {
        opacity: 0;
    }
    .custom-animation-enter-active {
        transition: opacity .5s;
    }

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

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

Exiting Animations

To configure the exiting animation, define the CSS classes by using the following syntax:

.{transitionName}-exit {
   /* The class that will be added on initial render of the element */
 }

 .{transitionName}-exit-active {
   /* The class that will be added after one time-frame(~16ms) to initiate the transition */
 }

The following example demonstrates how to customize an exiting Slide Animation.

<style>

    .custom-animation-exit {
        opacity: 0;    
    }
    .custom-animation-exit-active {
        transition: opacity .5s;
    }

    .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);
    }
    
    .child{
        opacity: 100;
    }
</style>
<div id="vueapp" class="vue-app">
    <div class="example">
        <div>
            <dl>
                <dt>
                    Animate:
                </dt>
                <dd>
                     <button class="k-button" @click="animate">Animate</button>
                </dd>
            </dl>
            <Animation
                    :transition-name="'custom-animation'"
                    :component-child-class-name="'child'">
                <div v-if="show" class="content">CONTENT</div>
            </Animation>
        </div>
    </div>
</div>
import { Animation } from '@progress/kendo-vue-animation';
Vue.component('Animation', Animation);

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

In this article