drop

Stying Drops

Drop creates a basic HTML structure:

<div class="drop-element">
  <div class="drop-content">
    <!-- Your content -->
  </div>
</div>

It adds the drop-open class when the drop is opened.

All of Tether's classes get added as well, using the drop- prefix.

Animation

To facilitate animation, Drop stratigically adds and removes three classes when a drop is opened:

• drop-open is added when the drop is opened and removed when it should be hidden. Use drop-open if you don't need animation.
• drop-after-open is added in the next event loop tick after the drop is opened. Start your CSS transitions when drop-after-open appears.
• drop-open-transitionend is added immediately, but not removed until the transitionend event fires on the drop. Use drop-open-transitionend to control the showing and hiding of your element when using an animation.

A simple CSS setup which demonstrates the method:

.drop-element {
  // Set the initial state for our animation
  opacity: 0;
}
.drop-element.drop-open-transitionend {
  // Show our drop while it's open and while the transition is going on
  display: block;
}
.drop-element.drop-after-open {
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  transition: opacity 1s;

  opacity: 1;
}

Be sure to include .drop-element in all of your selectors, as all classes get added to both the element and the target.

Themes

Drop ships with two animated themes and one non-animated one. They are available in the sass and css directories of the project.

If you look at the Sass, you'll notice that we make use of mixins which allow you to configure many elements of the theme to make it suit your application.