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
classshow:
- trigger effect when element gets.show
classactive/T:
- trigger effect on child elements when parent element gets.active
classshow/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}"
.
Click the elements to toggle active class:
<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}"
.
Click the wrapper to toggle its active class:
<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.
Click the elements to toggle active class:
<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.
Click the wrapper to toggle its active class:
<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.
active:
trigger doesn't work
With important !
mark
<!-- 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>