The event flow for actions
This section covers the order in which action commands are run in event declarations. In general, it is pretty obvious - the commands are run in sequence flowing downwards through your config.
But in the case of running target selectors, in exactly which order do commands run?
This is important to know if you need to incorporate pauses or delays and need to know what sequence the event flow takes by default.
Let's take this scenario:
div:click {
span {
background-color: blue;
color: white;
}
}If you had four spans, would it run all of the commands on the first span, then all commands on the second one, etc.?
Or would it run the first command on the first span, the first command on the second span, etc. then run the second command on the first span, the second command on the second span, etc.?
Here is the answer:
Span tag 1: runs background-color: blue;
Span tag 1: runs color: white;
Span tag 2: runs background-color: blue;
Span tag 2: runs color: white;
Span tag 3: runs background-color: blue;
Span tag 3: runs color: white;
Span tag 4: runs background-color: blue;
Span tag 4: runs color: white;
See this example below to see it in action. The await option on the after 1s action commands - operating on 4 separate span tags from a click event - makes the event flow easy to see. Remember, there is only one event flow running here. This example visually demonstrates the exact flow the core takes when iterating through your config commands. Normally you wouldn't even notice this, but when you start using pause and await this information becomes quite important, so that you don't go "Huh?".
Bear in mind that "await" is waiting until the "after ns" is processed before continuing - it is not waiting for the CSS transition. If you don't understand that concept, then the code won't make sense.
Using the "await" option in a single event with multiple targets
That should clear up which sequence the event flow takes during regular operation. The browser usually executes action commands fast enough so that everything looks like it's happening at once, so you may not have fully realised that action commands flow in the way they do.
The target selector "parallel" option
Maybe you need the target selector event flows to run simultaneously. You can do this by using the parallel option.
Putting a parallel option onto the target selector gives a different flow:
Span tag 1: runs background-color: blue;
Span tag 2: runs background-color: blue;
Span tag 3: runs background-color: blue;
Span tag 4: runs background-color: blue;
Span tag 1: runs color: white;
Span tag 2: runs color: white;
Span tag 3: runs color: white;
Span tag 4: runs color: white;
See this example:
The "pause" command
You would generally use the parallel option if you are using delayed actions and you need this parallel event flow to make things happen in a certain way. Its use depends on what you are trying to achieve, and it depends if you are using native CSS transitions or not. The ACSS fade commands are a little bit different, because these are not asynchronous in the same way that native CSS transitions are, so it might get a little weird there.
You can also simulate the parallel event flow by placing your event into its own event (ie. you can just make up your own event name for an element and then "trigger" it.) Doing this will give you what appears to be a parallel event flow. In reality, each event in ACSS is its own thing with its own event flow, so if you set up multiple events then they are going to appear as if they are happening at the same time.