-
Notifications
You must be signed in to change notification settings - Fork 757
Description
In #12336, we resolved to use separate namespaces for different types of animation triggers, i.e. event-trigger-* and timeline-trigger-*. We still need to work out what properties/longhands exist within the namespaces.
The conversation continued in #12611 where the most recent suggestion uses a generic trigger() function and custom/higher-level action names that group the raw actions (option 1):
.event_source {
event-trigger-name: --event-source;
event-trigger-actions: --click-touch click touch --press-p keypress("p");
/* the --event-source event trigger defined two named actions, --click-touch and --press-p. */
}
.event_target {
animation: glow;
animation-trigger: trigger(--event-source, --click-touch play-pause, --press-p play, keypress("r") reset);
/* can refer to multiple trigger actions, either by "action name" or directly */
}
.timeline_source {
timeline-trigger: --view-trigger view() contain;
}
.timeline_target {
animation-trigger: trigger(--view-trigger, enter play-forwards, exit play-backwards);
}
A few alternatives we can consider are:
- option 2: Instead of a generic
trigger()function, haveanimation-triggeruseevent()andtimeline()functions which have different "signatures."
<single-animation-trigger>: event(<dashed ident>, <behavior>) | timeline(<dashed ident>, <entry behavior>, <exit behavior>);
animation-trigger: [ [ <single-animation-trigger>]+ ]#
For example:
.event_source {
event-trigger: --click-touch-trigger click touch, --dblclick-trigger dblclick;
}
.event_target {
animation-trigger: event(--click-touch-trigger, play) event(--dblclick-trigger, pause);
}
.timeline_source {
timeline-trigger: --timeline-trigger view contain;
}
.timeline_target {
animation-trigger: timeline(--timeline-trigger, play-forwards, play-backwards);
}
option 3: Put the actions/behavior configurations within the event-trigger-* and timeline-trigger-* namespaces. This is the second alternative in flackr's suggestion from #12336.
Proposed Solution: Keep the generic trigger() function along with custom/higher-level action names (option 1).
Three important properties of option 1 are that:
- (a) it preserves the fact that timeline-trigger's "exit" and "enter" are paired,
- (b) it's flexible in that it allows actions to be specified on either the source or the target, and
- (c) by keeping behaviors in
animation-trigger,event-triggerandtimeline-triggerare conceptually reusable in a non-animation contexts.
Option 2 lacks the flexibility of (b). Option 3 lacks the flexibility (b) and the reusability of (c) (sort of).
@flackr @ydaniv @fantasai @szager-chromium @tabatkins , ptal, thanks.