Triggers Timeout

Make class changes based on elapsed time. Set start or even end timeout to make the changes revert back

Overview

Dynamically add, remove or toggle classes when desired amount of time has elapsed. Using the start keyword you can make class changes, then using end keyword you can revert these changes back. Use s or ms units.

Syntax

data-tor="timeout:class.<action>(<classes>, {<start-time>, <end-time>})"

Where:

• <action> - performed class action. This can be add, remove or toggle
• <classes> - a list of classes to change separated by the space
• <start-time> - the start timeout that starts the class change in s or ms
• <end-time> - (optional) - the end timeout that ends the class change in s or ms

Examples

Add class

To add a class after the reached timeout, use class.add. This example shows how to add an .active class to the dark popup element (placed in the top right corner) when the timeout reaches 3s. The .active class is used as a trigger to run the animation that is defined byactive:[fade.in pull.left(md) @pointer-events(none; auto)] syntax.

<div data-tor="timeout:class.add(active, {start: 3s})">Wait to add</div>
<div data-tor="timeout:class.add(active, {start: 3000ms})">Wait to add</div>

Remove class

To remove a class after the reached timeout, use class.remove. This example shows how to remove an .active class from the blue popup element (placed in the bottom right corner) when the timeout reaches 6s.

<div data-tor="timeout:class.remove(active, {start: 6s})">Wait to remove</div>
<div data-tor="timeout:class.remove(active, {start: 6000ms})">Wait to remove</div>

Revert class changes

To toggle a class on the element, use class.toggle() action.

<div data-tor="timeout:class.toggle(active, {start: 5s, end: 8s})">Wait to toggle</div>

Multiple classes

You can also change multiple classes at once, just separate them with a space.

<div data-tor="timeout:class.toggle(opacity-50 bg-dark rounded-xl, {start: 5s})">Wait to toggle multiple classes</div>