Built in Active class triggers

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(p)|show(p)>:<effect> where:

• active: - triggers the effect when element gets .active class
• show: - triggers the effect when element gets .show class
• active(p): - triggers the effect on child elements when parent element gets .active class
• show(p): - 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="<active|show>:<effect>" triggers.

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

Parent triggers

Trigger multiple effects on child elements when parent element gets .active or .show class by using data-tor="<active|show>(p|<selector>):<effect>".

Using data-tor-parent

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

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

Custom parent selector

It’s also possible to trigger multiple effects without data-tor-parent element. Just use data-tor="<active(<selector>)|show(<selector>)>:<effect>" and target your desired element.

This example shows how to create multiple effects when the parent #wrapper selector is hovered.

<div id="wrapper">
  <div data-tor="active(#wrapper):scale.to(75%)">Scale</div>
  <div data-tor="active(#wrapper):opacity(50)">Opacity</div>
  <div data-tor="active(#wrapper):push.up(xs)">Push up</div>
</div>

Multiple triggers

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

Triggers

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

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

Parent triggers

Use multiple <active(p)|show(p)>: in one data-tor attribute.

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

Combination

You can even combine <active|show>: with <active(p)|show(p)>:. But because <active(p)|show(p)>: 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.

<!-- Default behavior -->
<div data-tor-parent="hover">
  <div data-tor="active(p):push.up(xs) active:push.up(md)">Push up</div>
  <div data-tor="active(p):scale.to(75%) active:scale.to(125%)">Scale</div>
  <div data-tor="active(p):opacity(50%) active:opacity(10%)">Opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-tor-parent="hover">
  <div data-tor="active(p):push.up(xs) !active:push.up(md)">Push up</div>
  <div data-tor="active(p):scale.to(75%) !active:scale.to(125%)">Scale</div>
  <div data-tor="active(p):opacity(50%) !active:opacity(10%)">Opacity</div>
</div>