Animation Effects
Use the different animation settings to change the interactivity of the Kendo UI Menu.
<div id="vueapp" class="vue-app" style="height:450px;">
<h4>Animation Settings</h4>
<ul class="options">
<li>
<input ref="toggle" name="animation" type="radio" @change="onChange"/> <label for="toggle">toggle animation</label>
</li>
<li>
<input ref="slide" name="animation" type="radio" checked="checked" @change="onChange"/> <label for="slide">slide animation</label>
</li>
<li>
<input ref="expand" name="animation" type="radio" checked="checked" @change="onChange"/> <label for="expand">expand animation</label>
</li>
<li>
<input ref="opacity" type="checkbox" checked="checked" @change="onChange"/> <label for="opacity">animate opacity</label>
</li>
<li>
<input ref="delay" name="animation" type="text" value="100" class="k-textbox" @change="onChange"/> <label for="delay">open/close delay</label>
</li>
</ul>
<kendo-menu id="menu1" ref="menu1">
<li>
Item 1
<ul>
<li>Sub Item 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
</ul>
</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
</ul>
</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
</ul>
</li>
<li>Sub Item 3</li>
</ul>
</li>
</kendo-menu>
</div>
<style>
.options li {
list-style: none;
}
</style>Vue.use(LayoutInstaller);
new Vue({
el: '#vueapp',
methods: {
getEffects: function () {
return (($(this.$refs.expand)[0].checked ? "expand:vertical " : "") +
($(this.$refs.slide)[0].checked ? "slideIn:down " : "") +
($(this.$refs.opacity)[0].checked ? "fadeIn" : "")) || false;
},
onChange: function (ev) {
var menu = this.$refs.menu1.kendoWidget();
var vm = this;
var animation = { open: { effects: vm.getEffects() } };
menu.setOptions({
animation: animation,
hoverDelay: $(this.$refs.delay)[0].value
})
}
}
})