Focus, reset, animation and transition triggers

Seven more events for on:: focusin(), focusout(), reset(), animationend(), animationcancel(), transitionend() and transitioncancel().

Syntax

on: focusin(<action>#), animationend(<action>#), …;

registry syntax: focusin(action, ...)

Parameters

focusin() focusout() reset()eventbubbling

Run on the target and its ancestors: a wrapper sees focus enter and leave.

animationend() animationcancel() transitionend() transitioncancel()eventtarget only

Run only for the element’s own animations and transitions; a child’s animation does not trigger the parent.

Effect

Each trigger runs its actions when the event fires.

Example

@keyframes fade { to { opacity: 0; } }.toast { --shown: state(true); }.toast:when(--shown) { animation: fade 2s forwards; }.toast { on: animationend(set(--shown, false)); }.toast:when(not --shown) { display: none; }

Behavior

• 0.9. The new form is an :on() rule such as .toast:on(animationend) { --shown: set(false); }. :on() also has submit, animationstart, dblclick and keyup. These on: triggers keep working in 0.9.
• No name filter: any animation or transition of the element runs the actions.
• One transitionend per transitioning property.
• animationcancel fires only for animations that had started (native behavior).
• reset runs after the native reset.

Supported contexts

• Inside on:.

Limitations

• In on:, submit, animationstart, animationiteration, transitionrun, transitionstart, dblclick and keyup are not supported. :on() has submit, animationstart, dblclick and keyup.
• Each used event type adds one delegated listener.

Related