Appearance

The Animations enable you to use their default styling options or to set custom CSS classes both to all wrapper Animation elements and to all their child elements.

Default CSS Classes

By default, the parent component renders a k-animation-container CSS class and the child component renders a k-child-animation-container CSS class. You can use these CSS classes to style the components without the need to specify separate CSS classes.

<style>
 .k-animation-container {
   background-color: lightgray;
 }
 .k-animation-container > .k-child-animation-container {
   color: lightgray;
   background-color: #ff6757;
 }

 .content {
   width: 100px;
   padding: 10px;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
 }
 .example {
   display: flex;
 }
 </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;
        }
    }
});

Customizing the Styles

By using custom CSS classes, you can customize:

Decorating the Parent

To set a custom CSS class to the parent Animation component, use either:

  • The class property, or
  • The style property.
<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);
 }
 .example {
   display: flex;
 }

 .wrapper {
   border-color: transparent;
   transition: border-color 1s ease-in-out;
 }
 </style>
<div id="vueapp" class="vue-app">
   <div class="example">
       <div>
           <dl>
               <dd>
                   <dt>
                       Color:
                   </dt>
                   <dd>
                       <select name="color" v-model="color">
                           <option value="red">red</option>
                           <option value="green">green</option>
                           <option value="blue">blue</option>
                       </select>
                   </dd>
               </dd>
               <dt>
                   Slide:
               </dt>
               <dd>
                    <button class="k-button" @click="animate">Animate</button>
               </dd>
           </dl>
           <Slide class="wrapper" :style="{ color: color, border: `1px solid ${color}` }">
               <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,
             color: 'red'
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        }
    }
});

Decorating the Child

To set a custom CSS class to the child Animation element, use either:

  • The component-child-class-name property
<style>
 .child {
     border-width: 1px;
     border-style: solid;
     border-radius: 5px
 }

 .content {
   width: 100px;
   padding: 10px;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 .example {
   display: flex;
 }
 </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 :component-child-class-name="'child'">
               <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