Remove DropDown Animations or Make Them Faster

Environment

Product

UI for Blazor

Description

This knowledge base article discusses the following scenarios:

• How to make the animations of the Telerik dropdowns faster for fast data entry?
• How to remove all animations for Telerik Blazor ComboBox, DropDownList, DateTimePicker and other selection components?
• I want to remove animations for the dropdowns to accommodate users who prefer no animations (e.g., for accessibility reasons).

Solution

You can use a CSS rule override to change or disable the animation of the Telerik dropdowns.

Disable Telerik Blazor dropdown animations

<TelerikComboBox Data="@DropDownData"
                 TextField="@nameof(DropDownModel.Text)"
                 ValueField="@nameof(DropDownModel.Id)"
                 @bind-Value="@SelectedValue"
                 Width="200px">
</TelerikComboBox>

<TelerikDropDownList Data="@DropDownData"
                     TextField="@nameof(DropDownModel.Text)"
                     ValueField="@nameof(DropDownModel.Id)"
                     @bind-Value="@SelectedValue"
                     Width="200px">
</TelerikDropDownList>

<TelerikDatePicker @bind-Value="@SelectedDate"
                   Width="200px">
</TelerikDatePicker>

<style>
    /* up to version 3.5.0 */
    .k-popup.k-reset,

    /* from version 3.6.0 */
    .k-child-animation-container {
        transition: none !important;

        /* to make dropdown animations faster use the following style INSTEAD */
        /* transition-duration: 100ms !important; */
    }
</style>

@code {
    private IEnumerable<DropDownModel> DropDownData = Enumerable.Range(1, 20)
        .Select(x => new DropDownModel { Id = x, Text = $"Item {x}" });

    private int SelectedValue { get; set; }

    private DateTime SelectedDate { get; set; } = DateTime.Now;

    public class DropDownModel
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

You can also wrap the custom CSS in a @media query to capture users who have configured their devices to display fewer animations.

CSS that targets disabled animations (motion) in the device accessibility settings

/* This media query captures accessibility settings, see 
   https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences
 */
@media screen and (prefers-reduced-motion: reduce) {
    .k-child-animation-container {
        transition: none !important;
    }
}

Notes

A setting might be exposed at component level for this in the future. You can track its status at Modify default values of animations.