All Components

Animation Effects

The TabStrip provides options for setting animations effects.

To configure the desired animation, use the animation prop and the composite animation-[...] settings.

<div id="vueapp" class="vue-app">
    <kendo-tabstrip :animation-open-effects="'expand:vertical fadeIn'"
                    :animation-open-duration="500"
                    :animation-open-effects="hide"
                    :animation-open-duration="100">
        <ul>
            <li class="k-state-active">
                Paris
            </li>
            <li>
                New York
            </li>
        </ul>
        <div>
            <div>
                <p>Rainy weather in Paris.</p>
            </div>
        </div>
        <div>
            <div>
                <p>Sunny weather in New York.</p>
            </div>
        </div>
    </kendo-tabstrip>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: "#vueapp"
})
In this article