animation Boolean|Object

Configures the opening and closing animations of the suggestion popup. Setting the animation option to false will disable the opening and closing animations. As a result the suggestion popup will open and close instantly.

animation:true is not a valid configuration.

Example - disable open and close animations

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: ["One", "Two"]
  },
  animation: false
});
</script>

Example - configure the animation

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: ["One", "Two"],
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
</script>

animation.close Object

Example - configure the close animation

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: ["One", "Two"],
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  }
});
</script>

animation.close.effects String

The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.

Complete list of available animations

animation.close.duration Number (default: 100)

The duration of the close animation in milliseconds.

animation.open Object

The animation played when the suggestion popup is opened.

Example - configure the open animation

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  }
});
</script>

animation.open.effects String

The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.

Complete list of available animations

animation.open.duration Number (default: 200)

The duration of the open animation in milliseconds.