Transition Toggle

‹ Back

Transition Classes

Simple little javascript library for toggling classes on the body, useful for CSS transitions.

Toggle classes to show/hide text
Open Transitioning Closed 
<div>
  <a href="#" data-transition="example1">Toggle classes to show/hide text</a><br />
  <span class="toggle example1-open-show">Open</span> 
  <span class="toggle example1-transitioning-show">Transitioning</span> 
  <span class="toggle example1-closed-show">Closed</span> 
</div>
<div>
  <a href="#" data-transition="example2">Toggle classes for an animation</a><br />
  <div class="example2-block">Block</div>
</div>

Customising settings with data attributes

You can customise the transition classes and targets with the following data attributes:

Attribute Default  
data-transition-speed 1000 Control the speed of the transition
data-transition-transitioning-class -transitioning Customise the transitioning class
data-transition-open-class -open Customise the open class
data-transition-target-selector body CSS Selector for the attribute that gets the transition and open classes.