Built in Active class triggers

Trigger one or multiple effects when the element gets .active or .show class

Overview

An Active class trigger launches the effect transition (animation) when element gets .active or .show class. These classes are widely used by Bootstrap, so you can add new effects to its components. To add an effect on the single element, use Triggers. If you need to animate multiple effects at once, when the parent element gets <.active|.show> class, use the Parent triggers. You can even combine these both triggers.

Syntax

Trigger syntax is as follows <active|show|active-T|show-T>:<effect> where:

  • active: - triggers the effect when element gets .active class
  • show: - triggers the effect when element gets .show class
  • active-T: - triggers the effect on child elements when parent element gets .active class
  • show-T: - triggers the effect on child elements when parent element gets .show class

Triggers

To launch the effect on single element when it gets .active or .show class, use data-tor-fx="<active|show>:<effect>" triggers.

Click the elements to toggle active class:

Background color
Opacity
<div data-tor-fx="active:bg(danger)">Background color</div>
<div data-tor-fx="show:opacity(50)">Opacity</div>

Parent triggers

Trigger multiple effects on child elements when parent element gets <.active|.show> class use data-tor-fx="<active-T|show-T>:<effect>".

Click the wrapper to toggle its active class:

Background color
Opacity
<div data-tor-fx-trigger="active show">
  <div data-tor-fx="active-T:bg(danger)">Background color</div>
  <div data-tor-fx="show-T:opacity(50)">Opacity</div>
</div>

Multiple triggers

You are free to combine multiple triggers between, or even with parent triggers in one data-tor-fx attribute.

Triggers

Use multiple <active|show>: in one data-tor-fx attribute.

Click the elements to toggle active class:

Push & shadow
Shrink & darken
<div data-tor-fx="active:push.up(xs) active:shadow(risen)">Push & shadow</div>
<div data-tor-fx="show:scale.to(75) show:bg-darken(md)">Shrink & darken</div>

Parent triggers

Use multiple <active-T|show-T>: in one data-tor-fx attribute.

Click the wrapper to toggle its active class:

Push & shadow
Shrink & darken
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="active-T:push.up(xs) active-T:shadow(risen)">Push & shadow</div>
  <div data-tor-fx="show-T:scale.to(75) show-T:bg-darken(md)">Shrink & darken</div>
</div>

Combination

You can even combine <active|show>: with <active-T|show-T>:. But because <active-T|show-T>: has a higher priority it may override <active|show>: trigger on some effects. Place exclamation mark ! before the trigger shorthand like this !active:<effect>. This will add !important attribute to the trigger and override the parent trigger. This is useful when you have couple of similar elements and you need to animate them once the parent trigger becomes active, but you also need to trigger the animation (transition) on individual elements without nesting them.

active: trigger doesn't work
Push & shadow
Shrink & darken
Turn & opacity
With important ! mark
Push & shadow
Shrink & darken
Turn & opacity
<!-- Default behavior -->
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="active-T:bg(danger) active:bg(secondary)">Push & shadow</div>
  <div data-tor-fx="active-T:scale.to(75) active:scale.to(125)">Shrink & darken</div>
  <div data-tor-fx="active-T:opacity(50) active:opacity(10)">Turn & opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-tor-fx-trigger="hover">
  <div data-tor-fx="active-T:bg(danger) !active:bg(secondary)">Push & shadow</div>
  <div data-tor-fx="active-T:scale.to(75) !active:scale.to(125)">Shrink & darken</div>
  <div data-tor-fx="active-T:opacity(50) !active:opacity(10)">Turn & opacity</div>
</div>