Animations

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
<div id="vueapp" class="vue-app">
    <div>
        <div class="example-config">
                <input
                    id="animate"
                    type="checkbox"
                    class="k-checkbox"
                    v-model="animate"
                />
                <label for="animate" class="k-checkbox-label">Animate</label>
                <hr />
                <input
                    id="animationDuration"
                    type="number"
                    min="0"
                    :disabled="!animate"
                    v-model.number="animationDuration" 
                    :style="{ width: '60px' }"
                />
                <label for="animationDuration" class="k-label">&nbsp;Animation duration</label>
                <hr />
            </div>
        <button
            class="k-button"
            @click="onClick"
            ref="button"
        >
            {{buttonText}}
        </button>
        <Popup
            :anchor="'button'"
            :show="show"
            :animate="computedAnimate"
            :popup-class="'popup-content'"
        >
            Popup content.
        </Popup>
    </div>
</div>

import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            show: false, 
            animate: true, 
            animationDuration: 300
        };
    },
    computed: {
        buttonText: function(){
            return this.show ? 'Hide' : 'Show';
        },
        computedAnimate: function(){
            return this.animate ? {
                 openDuration: this.animationDuration, 
                 closeDuration: this.animationDuration
                  } : false
        }
    },
    mounted(){
        this.show= true;
    },
    methods: {
         onClick () {
            this.show = !this.show;
        }
    }
});