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.

Razor

    @(Html.Kendo().ActionSheet()
        .Name("actionsheet")
        .Title("Select item")
        .Animation(animation =>
        {
            animation.Enable(true);
            animation.Open(config =>
            {
                config.Expand();
                config.Fade(FadeDirection.In);
                config.Duration(AnimationDuration.Slow);
                config.Zoom(ZoomDirection.In);
            })
            .Close(config =>
            {
                config.Fade(FadeDirection.Out);
                config.Duration(AnimationDuration.Fast);
            });
        })
        .Adaptive(true)
        .Items(items =>
        {
            // add actionsheet items
        })
    )

See Also

• Using Animations in the ActionSheet for ASP.NET MVC (Demo)

• Server-Side API of the ActionSheet HtmlHelper

• Client-Side API of the ActionSheet