Direction

Except for the Fade Animation, the Animations provide a set of the predefined directions which allow you to control their entering and exiting effects.

The Fade Animation does not feature a configurable direction because it represents a transition in the opacity of the element.

To define the direction of the entering and exiting animations, use the direction property of each Animation type.

Expand

The Expand Animation supports the following predefined directions:

  • (Default) vertical—Expands the content from center to top and bottom, and vice-versa.
  • horizontal—Expands the content from center to left and right, and vice-versa.
<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);
  }
  .k-radio-label {
      line-height: 1.2;
      margin-bottom: .5rem;
  }
  </style>
<div id="vueapp" class="vue-app">
        <div class="row">
                <div class="col-md-6">
                        <dl>
                    <dt>
                        Expand:
                    </dt>
                    <dd>
                        <button class="k-button" @click="animate">Animate</button>
                    </dd>
                    </dl>
                    <Expand :direction="direction">
                        <div v-if="show" class="content">CONTENT</div>
                    </Expand>
                </div>
                <div class="col-md-6">
             <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div class="example-config">
                                <input id="ver" class="k-radio" type="radio"
                                 name="direction" value="vertical" :checked="direction === 'vertical'" @click="onChange"/>
                                <label for="ver" class="k-radio-label">
                                    &nbsp;Vertical
                                </label>
                                <br />
                                <input id="hor" class="k-radio" type="radio" name="direction" value="horizontal" :checked="direction === 'horizontal'"
                                 @click="onChange"/>
                                <label for="hor" class="k-radio-label">
                                    &nbsp;Horizontal
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
        </div>
    </div>
</div>
import { Expand } from '@progress/kendo-vue-animation';
Vue.component('Expand', Expand);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            show: false,
            direction: "vertical"
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        },
        onChange (e) {
            this.direction= e.target.value;
        }
    }
});

Push

The Push Animation supports the following predefined directions:

  • (Default) right—Pushes the content from left to right.
  • up—Pushes the content from bottom to top.
  • down—Pushes the content from top to bottom.
  • left—Pushes the content from right to left.
<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);
  }
  .k-radio-label {
      line-height: 1.2;
      margin-bottom: .5rem;
  }
  </style>
<div id="vueapp" class="vue-app">
        <div class="row">
                <div class="col-md-6">
                        <dl>
                    <dt>
                        Push:
                    </dt>
                    <dd>
                        <button class="k-button" @click="animate">Animate</button>
                    </dd>
                    </dl>
                    <Push :direction="direction">
                        <div v-if="show" class="content">CONTENT</div>
                    </Push>
                </div>
                <div class="col-md-6">
             <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                             <div className="example-config">
                                <input id="up" className="k-radio" type="radio" name="direction" value="up" :checked="direction === 'up'" @click="onChange"/>
                                <label for="up" className="k-radio-label">
                                    &nbsp;Up
                                </label>
                                <br />
                                <input id="down" className="k-radio" type="radio" name="direction" value="down" :checked="direction === 'down'" @click="onChange"/>
                                <label for="down" className="k-radio-label">
                                    &nbsp;Down
                                </label>
                                <br />
                                <input id="left" className="k-radio" type="radio" name="direction" value="left" @checked="direction === 'left'" @click="onChange"/>
                                <label for="left" className="k-radio-label">
                                    &nbsp;Left
                                </label>
                                <br />
                                <input id="right" className="k-radio" type="radio" name="direction" value="right" @checked="direction === 'right'" @click="onChange"/>
                                <label for="right" className="k-radio-label">
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
        </div>
    </div>
</div>
import { Push } from '@progress/kendo-vue-animation';
Vue.component('Push', Push);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            show: false,
            direction: "up"
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        },
        onChange (e) {
            this.direction= e.target.value;
        }
    }
});

Reveal

The Reveal Animation supports the following predefined directions:

  • (Default) vertical—Reveals the height of the content.
  • horizontal—Reveals the width of the content.
<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);
  }
  .k-radio-label {
      line-height: 1.2;
      margin-bottom: .5rem;
  }
  </style>
<div id="vueapp" class="vue-app">
        <div class="row">
                <div class="col-md-6">
                        <dl>
                    <dt>
                        Reveal:
                    </dt>
                    <dd>
                        <button class="k-button" @click="animate">Animate</button>
                    </dd>
                    </dl>
                    <Reveal :direction="direction">
                        <div v-if="show" class="content">CONTENT</div>
                    </Reveal>
                </div>
                <div class="col-md-6">
             <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div class="example-config">
                                <input id="ver" class="k-radio" type="radio"
                                 name="direction" value="vertical" :checked="direction === 'vertical'" @click="onChange"/>
                                <label for="ver" class="k-radio-label">
                                    &nbsp;Vertical
                                </label>
                                <br />
                                <input id="hor" class="k-radio" type="radio" name="direction" value="horizontal" :checked="direction === 'horizontal'"
                                 @click="onChange"/>
                                <label for="hor" class="k-radio-label">
                                    &nbsp;Horizontal
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
        </div>
    </div>
</div>
import { Reveal } from '@progress/kendo-vue-animation';
Vue.component('Reveal', Reveal);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            show: false,
            direction: "vertical"
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        },
        onChange (e) {
            this.direction= e.target.value;
        }
    }
});

Slide

The Slide Animation supports the following predefined directions:

  • (Default) down—Slides the content from top to bottom, and vice-versa.
  • up—Slides the content from bottom to top, and vice-versa.
  • left—Slides the content from right to left, and vice-versa.
  • right—Slides the content from left to right, and vice-versa.
<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);
  }
  .k-radio-label {
      line-height: 1.2;
      margin-bottom: .5rem;
  }
  </style>
<div id="vueapp" class="vue-app">
        <div class="row">
                <div class="col-md-6">
                        <dl>
                    <dt>
                        Slide:
                    </dt>
                    <dd>
                        <button class="k-button" @click="animate">Animate</button>
                    </dd>
                    </dl>
                    <Slide :direction="direction">
                        <div v-if="show" class="content">CONTENT</div>
                    </Slide>
                </div>
                <div class="col-md-6">
             <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                             <div className="example-config">
                                <input id="up" className="k-radio" type="radio" name="direction" value="up" :checked="direction === 'up'" @click="onChange"/>
                                <label for="up" className="k-radio-label">
                                    &nbsp;Up
                                </label>
                                <br />
                                <input id="down" className="k-radio" type="radio" name="direction" value="down" :checked="direction === 'down'" @click="onChange"/>
                                <label for="down" className="k-radio-label">
                                    &nbsp;Down
                                </label>
                                <br />
                                <input id="left" className="k-radio" type="radio" name="direction" value="left" @checked="direction === 'left'" @click="onChange"/>
                                <label for="left" className="k-radio-label">
                                    &nbsp;Left
                                </label>
                                <br />
                                <input id="right" className="k-radio" type="radio" name="direction" value="right" @checked="direction === 'right'" @click="onChange"/>
                                <label for="right" className="k-radio-label">
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
        </div>
    </div>
</div>
import { Slide } from '@progress/kendo-vue-animation';
Vue.component('Slide', Slide);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            show: false,
            direction: "up"
        };
    },
    methods:{
        animate(){
             this.show = !this.show;
        },
        onChange (e) {
            this.direction= e.target.value;
        }
    }
});

In this article