Transition Toggle
‹ BackTransition Classes
Simple little javascript library for toggling classes on the body, useful for CSS transitions.
<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. |