New to Kendo UI for jQuery? Start a free 30-day trial
Animations
The ActionSheet in adaptive mode supports opening and closing animations.
By default, the ActionSheet animations are disabled, and the component opens and closes instantly.
You can modify the opening and closing animations through the open and close options of the animation configuration. These properties are effective only when the adaptive mode is enabled.
The following example demonstrates how to specify animation effects with duration when the ActionSheet opens and closes.
<button id="open">Open</button>
<div id="actionsheet"></div>
<script>
var actionsheet = $("#actionsheet")
.kendoActionSheet({
title: "Select item",
adaptive: true,
animation: {
open: {
effects: "slideIn:down",
duration: 1500,
},
close: {
effects: "slideIn:down",
duration: 1500,
},
},
items: [
{
text: "Edit Item",
icon: "pencil"
},
{
text: "Add to Favorites",
icon: "heart"
},
{
text: "Upload New",
icon: "upload"
},
{
text: "Cancel",
icon: "cancel",
group: "bottom"
},
],
})
.data("kendoActionSheet");
$('#open').on('click', function(){
actionsheet.open();
})
</script>