Delaying actions ("after")

Every action command can be delayed by using "after" followed by a CSS friendly time, such as "1s" or "500ms".

See this syntax use:

#MenuItemAbout:click {
    body {
        add-class: .menuOpen after 1s, .menuAbout after 500ms;
    }
}

Note that in the syntax example above that delay times are specific for each action. So multiple actions on the same line may have their own delay time.

"after stack" or "after 0s"

"After stack" means perform the action after the current "call stack" of commands.  A call stack is simply all the commands that are going to be run in the current queue of actions for this declaration and any immediately connected declarations. Delayed events are not part of the current call stack, as these happen later on, in a different batch. The call stack refers to the all the commands that are happening at this time.

Since version 2.3.0 all action commands and target selectors run sequentially in the order that they appear in the config, so most of the time you can just place the command at the bottom of your declaration and that will ensure it happens at the end.

But in the occasional scenario where this is not enough, use "after stack" or "after 0s". This will put a zero second timeout on the action command which has the effect of forcing it to run immediately after the current call stack of commands. The phrase "after 0s" does not fully explain what is happening, hence we have added "after stack". But you can use "after 0s" if you prefer. "After stack" is perhaps a nano-second quicker to run from the core's perspective if nano-optimising is your bag.

#myMenuItem:click {
    add-class: .menuSelected after stack;
    .menuSelected {
        remove-class: .menuSelected;
    }
}

This will add the class menuSelected to the myMenuItem element and remove the class from all other elements. Here it does the same thing as the take-class command.

Now that sequential commands are set up in Active CSS, you could have just moved the add-class command to be underneath the remove-class which would do the same thing and give you a smoother and faster performance than using "after stack" or "after 0s":

#myMenuItem:click {
    .menuSelected {
        remove-class: .menuSelected;
    }
    add-class: .menuSelected;
}

But "after stack" or "after 0s" might serve occasionally, so there is no plan to remove this.

For an advanced technical look at the use of this, see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Zero_delays

Using a variable as a delay parameter

You can use most ACSS variable references as delay parameters, eg:

render-after-begin: "something<br>" after {$aVar};
render-after-begin: "something<br>" after {@data-some-attribute};
render-after-begin: "something<br>" after {$RAND100-500}ms;
render-after-begin: "something<br>" after {= 2 + 3 =}s;

Use with CSS commands

You can use "after" with regular CSS commands. It won't clash with standard CSS syntax as long as the delay is at the end of the command.

For example:

background-color: green after 1s;

Cancelling delayed actions

You can cancel delayed events before they happen. You can cancel either a general action, or target a specific action by assigning a label to the action itself and then cancelling by label.

See the docs on cancel-timer for the use of labels for after and every options on action commands. Labels are a handy method to cancel delayed actions.

Cancelling delayed actions is useful for things like building menus, where you intentionally delay the showing of a menu while the mouse is moving around and you need to cancel previously delayed actions on menus that would be shown next but now don't need to be shown any more because the mouse has moved to a new menu option. That would be tweaking to get a better UX. That may sound confusing, but it will become clear if you ever try to build an interactive menu. Which you should try to do by the way (if you can't do it in CSS alone) - it's a lot less code doing it in Active CSS than doing it as a plugin, and also a lot more tweakable as you yourself would have written it. You can tailor-make a menu for your site, rather than tailor your site to the restrictions of a third-party JavaScript plugin. See the menu example for the basics on that.