CSS animations

CSS animations

Want to add some fancy effects to your selects when they open and close? Ember Power Select has you covered!

When opening and closing the selects EPS adds some utility classes to the .ember-power-select-dropdown element that you can target to perform your CSS vodoo.

The lifecycle of those clases is:

  • After the .ember-power-select-dropdown has been added to the DOM, it receives a .ember-basic-dropdown--transitioning-in class.
  • Once all opening animations or transitions have finished, .ember-basic-dropdown--transitioning-in is replaced by .ember-basic-dropdown--transitioned-in.
  • When closed, EPS replaces its content with a clone and adds a .ember-basic-dropdown--transitioning-out to it.
  • Once all closing animations or transitions have finished, the "ghost" clone is finally removed.
  • If you don't have animations nor transitions, most of this work is skipped.

So, what do you have to do to enable this? Nothing, just add some animation with CSS.

Note that you have to use CSS animations, this approach doesn't work with CSS transitions.

Lets add some slide and fade in animation to a select that uses the bootstrap theme.

Now that you can add animations, the first rule of animations is use them with caution, and if you decide that it worth adding them, keep them short. Almost any animation over a third of a second is probably too long.

Now lets dive in something more serious. Debouncing searches.