Animation Triggers

1.1. 他の仕様との関係性

`WEB-ANIMATIONS-1$r は、 ~Web~platform上の~animation用に 抽象的な概念的な~modelを — この~modelを成す要素（ `~animation$や`時列線$を含む）, それに結付けられる~APIと伴に — 定義する。 この仕様は、 `誘発される~animation$を定義することにより，その~Web~animation~modelを拡張する — それは、［ それらに対し誘発体を利用して，`再生~制御~機能$を遂行する ］ことを許容する。 ◎ Web Animations [WEB-ANIMATIONS-1] defines an abstract conceptual model for animations on the Web platform, with elements of the model including animations and timelines, and associated programming interfaces. This specification extends the Web Animations model by defining triggered animation and allowing to perform playback control functions on them using triggers.

この仕様は、［ これらの概念とヤリトリするための~API ］および［ これらの概念を `CSS-ANIMATIONS-2$r に適用する~CSS~prop ］を導入する。 ~scriptingを~supportしない`~UA＠~INFRA#user-agent$であっても、 これらの~CSS~propの挙動が~APIの用語で述べられる所では［ ~CSS特能を下層の~APIが場を占めていたかのように挙動するよう実装する ］ことにより，この仕様に適合し得る。 ◎ This specification introduces both programming interfaces for interacting with these concepts, as well as CSS properties that apply these concepts to CSS Animations [CSS-ANIMATIONS-2]. To the extent the behavior of these CSS properties is described in terms of the programming interfaces, User Agents that do not support scripting may still conform to this specification by implementing the CSS features to behave as if the underlying programming interfaces were in place.

この仕様は、 進捗に基づく［ `時列線$, `~animation$ ］を指定するために， `SCROLL-ANIMATIONS-1$r において導入された各種［ 時列線, 範囲 ］の概念を利用する。 ◎ This specification uses the timeline and ranges concept introduced in the Scroll-Driven Animations module [SCROLL-ANIMATIONS-1] for specifying progress-based timelines and animations.

この仕様における特能は、 ~CSSにおける ほとんどの演算（`選択子$の照合は別として）と同様に， `平坦~化された要素~tree$に対し演算する。 ◎ Like most operations in CSS besides selector matching, features in this specification operate over the flattened element tree.

1.2. 値~定義

【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

2.1. 誘発体の名前の視野~法： `trigger-scope^p ~prop

`誘発体$の`名前$tGは、 既定では大域的であり， 他のどこに位置する要素からも【 `animation-trigger$p を介して】利用-可能になる （それは、 `~tree視野な名前$であり，`~shadow根$との相互作用を有するが）。 複数個の要素が同じ`名前$tGを伴う`誘発体$を定義する場合、 `~tree順序$で後にある要素により定義された`誘発体$が利用される。 ◎ Trigger names are global by default, usable by other elements regardless of their position. (Though they are tree-scoped names, so have interactions with shadow roots). If multiple elements define triggers with the same trigger name, the trigger defined by the later element in tree order is used.

`trigger-scope$p ~propにより， `名前$tGの視野を文書を成すある下位treeへ制限できる — その外側にある要素からは，`名前$tGは見えなくなり、 その内側にある要素からは，当の視野の内側で定義された`名前$tGしか見えなくなるよう。 ◎ The trigger-scope property can limit the scope of a name to a subtree of the document, so elements outside won’t see the chosen trigger name, and elements inside will only see the version of the trigger name defined inside the scope.

この~propは、 `誘発体$の`名前$tGの視野を当の要素を成す下位treeに絞る。 各種~値の意味は： ◎ This property scopes trigger names to the subtree of the matching element. Its values are:

`none@v

`名前$tGの視野は変更されない。 ◎ No changes in trigger name scope.

`all@v

次を指定する：

• ［［ 当の要素／その子孫たち ］により定義された`誘発体$ ］の`名前$tGが視野に入る要素は、［ 当の要素の`平坦~tree$における子孫 ］に限られる — 子孫のうち［ `trigger-scope$p を利用している【当の要素の】ある子孫により，すでに視野が制限された ］ものを除いて

• 当の要素の子孫たちは、 この下位treeの中の`誘発体$†の`名前$tGにしか合致しないよう視野が制限される

  【† たぶん，前項との一貫性から［ ［当の要素／その子孫たち］ により定義された`誘発体$ ］を指すと思われる。 】

◎ Specifies that all trigger names defined by this element or its descendants—​whose scope is not already limited by a descendant using trigger-scope—​to be in scope only for this element’s flat tree descendants; and limits descendants to only match trigger names to triggers within this subtree.

この値は、 同じ~tree視野~内の`名前$tGに限り影響する — それが，`厳密に照合される$tsN `~tree視野な名前$であったかのように （すなわち， `trigger-scope$p の値に［ 関連な`名前$tGすべてが `dashed-ident$t として — `--foo, --bar, ...^v 等々の様に — 挙げられた ］かのように動作する）。 ◎ This value only affects trigger names in the same tree scope, as if it were a strictly matched tree-scoped name. (That is, trigger-scope: all acts identically to trigger-scope: --foo, --bar, ..., listing all relevant trigger names.)

【† 上で述べた “`平坦~tree$における” と “`厳密に照合される$tsN” が整合でないように思われるが？ 】

`dashed-ident$t

対象になる`名前$tGが所与の `dashed-ident^t に限定されることを除いて， `all$v と同様になる。 ◎ Specifies that a matching trigger name defined by this element or its descendants—​whose scope is not already limited by a descendant using trigger-scope—​to be in scope only for this element’s flat tree descendants; and limits descendants to only match these trigger names to triggers within this subtree.

`dashed-ident$t は、 `厳密に照合される$tsN `~tree視野な名前$を表現する — すなわち、 それが照合し得る`名前$tGは，同じ~shadow~tree内にあるものに限られる。 `CSS-SHADOW-1$r【！CSS-SCOPING-1】 ◎ The <dashed-ident> represents a strictly matched tree-scoped name, i.e. it can only match against trigger names in the same shadow tree.[CSS-SCOPING-1]

2.2. 時列線~誘発体

`時列線~誘発体@ （ `timeline trigger^en ）は、 何らかの`時列線$【の`現-時刻$】が当の誘発体の［ `作動化~範囲@tT （ `activation range^en 【作動化されることになる範囲】）に入るとき／ `作動~範囲@tT （ `active range^en 【作動中である範囲】）から出るとき ］に作動化される`誘発体$である。 それは、［ `timeline-trigger$p 略式~propや, その下位propたち ］を伴う【 `timeline-trigger-name$p が初期~値~以外をとる】要素~上で定義される。 ◎ A timeline trigger is a trigger which is activated when some timeline enters the trigger’s activation range, or leaves the trigger’s active range. It is defined on an element with the timeline-trigger shorthand property, or its longhands.

各 `時列線~誘発体$ %誘発体 には、 真偽値をとる `作動中か@tT 【！誘発体~状態】 が結付けられる — 初期~時は ~F とする： ◎ A timeline trigger has a binary trigger state associated with it; it is initially "inactive".＼

• ~F をとる間は、 %誘発体 に結付けられた`時列線$【の`現-時刻$】が %誘発体 の`作動化~範囲$tTに入ったとき （または，そこで開始されたとき）， %誘発体 に結付けられた `入口~動作@tT 【！entry action】 を遂行することに加え， %誘発体 の`作動中か$tTを ~T へ切替える。 ◎ While it’s "inactive", the associated timeline entering (or starting in) the trigger’s activation range performs an associated entry action and switches the trigger state to "active";＼
• ~T をとる間は、 %誘発体 に結付けられた`時列線$【の`現-時刻$】が %誘発体 の`作動~範囲$tTから`出た^emとき， %誘発体 に結付けられた `出口~動作@tT を遂行することに加え， %誘発体 の`作動中か$tTを ~T へ切替える。 ◎ while it’s "active", the associated timeline leaving the trigger’s active range performs an associated exit action and switches the trigger state to "inactive".

【 `作動中か$tTは、 原文では “`trigger state^en（誘発体~状態）” と称され，［ "`inactive^en", "`active^en" ］をとり得るものと定義されるが、 この訳では，真偽-~flagで表現することにする。 】

注記： 既定では、 `作動~範囲$tTは`作動化~範囲$tTと同じになる — 手動で指定されときでも、 `作動~範囲$tTは，常に`作動化~範囲$tTの`上位集合^emになる。 この 2 つの範囲は、 例えば，ある `animation-trigger$p が［ 要素が~screenの中央近くに~scrollされたとき， （`作動化~範囲$tTとして比較的~小さな窓を伴う`~view進捗~時列線$を利用して） ~animationを開始する ］が［ 要素が全部的に~screenから外れるまでは， （`作動~範囲$tTとして `cover＠~SCROLL-ANIM#valdef-animation-timeline-range-cover$v を利用して） それを停止しない ］ことを許容する。 ◎ Note: By default, the active range is the same as the activation range; even when manually specified, the active range is always a superset of the activation range. The two ranges allow, for example, an animation-trigger to start an animation when an element is scrolled close to the center of the screen (using a view progress timeline with a relatively small window as the activation range), but not stop it until the element is fully off-screen (using cover as the active range).

`時列線~誘発体$は、 ある要素~上の誘発体として（ `animation-trigger$p などにより）利用されるときは， 1 個か 2 個の動作が結付けられ得る。 当の誘発体の`入口~動作$tTは， 1 個目のそれになり、 `出口~動作$tTは， 2 個目も指定されたならば それ, 指定されなかったならば何もしない。 ◎ A timeline trigger can have one or two actions associated with it when used as a trigger on an element (such as by animation-trigger). If two are specified, the first is the trigger’s entry action and the second is the trigger’s exit action; if only one is specified, the first is the trigger’s entry action and its exit action is to do nothing.

要素は，複数個の`時列線~誘発体$を定義し得るが、 それらが利用する`時列線$は［ 同じになる／異なる ］必要はなく，時列線が同じでも異なる範囲を伴い得る。 `timeline-trigger$p の下位propたちが成す集合は、 `協調している~list~prop~group$を形成する。 `timeline-trigger-name$p が， `協調している基底~list~prop$になり、 `協調される値~list$を成す各~itemは， 1 個の`時列線~誘発体$を成す~prop群を定義する。 ◎ An element can define multiple timeline triggers, using the same timeline (potentially with different ranges) or different ones. The set of timeline-trigger longhands form a coordinating list property group, with timeline-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single timeline trigger.

2.3. ~event誘発体

`~event誘発体@ （ `event trigger^en ）は、 当の要素に向けてある種の~event（ `Event$I ）が発火されたとき作動化される`誘発体$である。 それは、［ `event-trigger$p 略式~propや, その下位propたち ］を伴う【 `event-trigger-name$p が初期~値~以外をとる】要素~上で定義される。 ◎ An event trigger is a trigger which is activated when certain Events are fired at the element. It is defined on an element with the event-trigger shorthand property, or its longhands.

各［ 有状態な`~event誘発体$ ］ %誘発体 には、 真偽値をとる `作動中か@eT 【！誘発体~状態】 が結付けられる — 初期~時は ~F とする： ◎ If it’s stateful, it has a binary trigger state associated with it, initially "inactive":＼

• ~F をとる間は、 %誘発体 は，それを定義している要素が［ %誘発体 の`入口~event群$eTを成すいずれかに合致する~event ］を受取ったとき限り作動化され、 %誘発体 に結付けられた `入口~動作@eT を遂行することに加え， %誘発体 の`作動中か$eTを ~T へ切替える。 ◎ while "inactive", it only activates when the defining element receives one of its enter events, performing an associated enter action and switching its trigger state to "active";＼
• ~T をとる間は、 %誘発体 は，それを定義している要素が［ %誘発体 の`出口~event群$eTを成すいずれかに合致する~event ］を受取ったとき限り非作動化され、 %誘発体 に結付けられた `出口~動作@eT を遂行することに加え， %誘発体 の`作動中か$tTを ~F へ切替える。 ◎ while "active", it only deactivates when it receives one of its exit events, performing an associated exit action and switching its trigger state back to "inactive".

【 `作動中か$eTは、 原文では “`trigger state^en（誘発体~状態）” と称され，［ "`inactive^en", "`active^en" ］をとり得るものと定義されるが、 この訳では，真偽-~flagで表現することにする。 】

無状態な`~event誘発体$ %誘発体 には、 その`誘発-~instance$用の動作を正確に 1 個だけ与えなければナラナイ。 有状態な`~event誘発体$には、 1 個か 2 個を与えれる。 %誘発体 の`入口~動作$eTは， 1 個目に供されたそれになる。 %誘発体 が無状態ならば、 その`出口~動作$eTは，［ 2 個目が供されたならば それ／ 他の場合は何もしない動作 ］になる。 ◎ A stateless event trigger must be given exactly one action for its trigger instance. A stateful one can be given one or two: the first is its enter action, and the second, if provided, is its exit action; if the second is not provided, the exit action is to do nothing.

注記： 無状態な`~event誘発体$と有状態な`~event誘発体$は、 【後者に】動作が 1 個【`入口~動作$eT用のそれ】しかアテガわれなかった場合でも，異なるように動作する。 有状態かつ動作が 1 個だけのものは、 `入口~event$を受取ってから，`出口~event$を受取るまでは、 実質的に “オフ” になる — その間に受取った他の`入口~event$を無視して。 一方で，無状態な`~event誘発体$は、 各`入口~event$に対し，毎回~動作を誘発することになる。 ◎ Note: A stateful and stateless event trigger act differently even if you only assign a single action; a single-action stateful event trigger will effectively "turn off" until it receives one of its exit events, ignoring any of the enter events after the first, while a stateless one will repeatedly trigger for every enter event.

要素は，複数個の`~event誘発体$を定義し得るが、 それらが利用する~event型【！ `Event$I 】たちは［ 同じになる／異なる ］必要はない。 `event-trigger$p の下位propたちが成す集合は、 `協調している~list~prop~group$を形成する。 `event-trigger-name$p が， `協調している基底~list~prop$になり、 `協調される値~list$を成す各~itemは， 1 個の`~event誘発体$を成す~prop群を定義する。 ◎ An element can define multiple event triggers, using the same Events or different ones. The set of event-trigger longhands form a coordinating list property group, with event-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single event trigger. ◎ ↑↑ The proposal I drew this text from specified that it only cares if the element is the target of the event. We probably want to allow for bubbling and/or capturing, possibly as an opt in/out.

`event-trigger-event@t
	= activate
	| interest
	| click
	| touch
	| dblclick
	| keypress(`string$t)
	| ...