Built in Active classes PRO

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: - trigger effect when element gets .active class
• show: - trigger effect when element gets .show class
• active/T: - trigger effect on child elements when parent element gets .active class
• show/T: - trigger effect on child elements when parent element gets .show class

Triggers

To launch the effect on single element when it gets {.active|.show} class, use data-fx="{a|s}:{effect}".

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

Parent triggers

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

<div data-fx-trigger="active show">
  <div data-fx="active/T:bg-color--danger">Background color</div>
  <div data-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-fx attribute.

Triggers

Use multiple {active:|show:} in one data-fx attribute.

<div data-fx="active:push--up active:shadow--risen">Push & shadow</div>
<div data-fx="show:shrink--small show:bg-darken--5">Shrink & darken</div>

Parent triggers

Use multiple {active/T:|show/T:} in one data-fx attribute.

<div data-fx-trigger="hover">
  <div data-fx="active/T:push--up active/T:shadow--risen">Push & shadow</div>
  <div data-fx="show/T:shrink--small show/T:bg-darken--5">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.

<!-- Default behavior -->
<div data-fx-trigger="hover">
  <div data-fx="active/T:bg-color--danger active:bg-color--secondary">Push & shadow</div>
  <div data-fx="active/T:shrink--small active:grow--out--small">Shrink & darken</div>
  <div data-fx="active/T:opacity--50 active:opacity--10">Turn & opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-fx-trigger="hover">
  <div data-fx="active/T:bg-color--danger !active:bg-color--secondary">Push & shadow</div>
  <div data-fx="active/T:shrink--small !active:grow--out--small">Shrink & darken</div>
  <div data-fx="active/T:opacity--50 !active:opacity--10">Turn & opacity</div>
</div>