CSS View Transitions Module Level 2（日本語訳）

◎要約

この~moduleは、 `~view遷移^cite ~APIが非同一-文書な~naviと伴にどう働くかを定義する。 ◎ This module defines how the View Transition API works with cross-document navigations.

~CSSisaLANG

1. 序論

◎非規範的

`~view遷移^cite は、 `~level 1$ にて指定されるとおり，［ `文書$の視覚的な状態どうしで~animateされる遷移を作成する］ことを開発者に許容する特能である。 ◎ View Transitions, as specified in [css-view-transitions-1], is a feature that allows developers to create animated transitions between visual states of the document.

この~level 2 は、次を追加することにより，`~level 1$ を拡張する： ◎ Level 2 extends that specification, by＼

次を可能化するために必要yな~APIと~lifecycle ⇒ 同一-生成元に属する非同一-文書な~naviにまたがる遷移 ◎ adding the necessary API and lifecycle to enable transitions across a same-origin cross-document navigation,＼
次がもっと容易になるようにする，少数のもの ⇒ 作者が，~pageにより多彩な~view遷移を伴わせる ◎ as well as a few additions that make it easier to author pages with richer view transitions.

~level 2 は、次に挙げるものを定義する： ◎ Level 2 defines the following:

`§ 非同一-文書な~view遷移＠#cross-document-view-transitions$ ⇒ `view-transition$at 規則, 非同一-文書な~view遷移の~lifecycleを可能化する~algoなど。 ◎ Cross-document view transitions, including the @view-transition rule and the algorithms that enable the cross-document view transition lifecycle.
`§ 選択的な~view遷移＠#selective-vt$ ⇒ ~styleを［ `作動中な~view遷移$docの存在に基づいて照合する］および［ある種の型を成している作動中な~view遷移に基づいて，より特定に照合する］ための仕方。 ◎ Selective view transitions, a way to match styles based on the existence of an active view transition, and more specifically based on the active view transition being of a certain type.
`§ ~view遷移~疑似要素たちの~styleの共有-法＠#shared-style-with-vt-classes$ ⇒ ~styleを一箇所で宣言して，それを複数の~view遷移~疑似要素で利用するための仕方。これは、 `view-transition-class$p ~prop, `§ 有名~疑似要素に対する追加＠#pseudo-element-class-additions$ も含む。 ◎ Sharing styles between view transition pseudo-elements, a way to declare a style once, and use it for multiple view transition pseudo-elements. This includes the view-transition-class property, and additions to named pseudo-elements

2. 非同一-文書な~view遷移

2.1. 概観

◎非規範的

2.1.1. 作動化

同一-文書な~view遷移では、作者は，~JSを利用して — `startViewTransition()$m を~callすることにより — ~view遷移を開始する。非同一-文書な~view遷移において，~view遷移を誘発するものは、文書から他の文書への~naviである — ~AND↓ が満たされる限り： ◎ With same-document view transitions, the author starts a view transition using JavaScript, by calling startViewTransition. In cross-document view transition, what triggers a view transition is a navigation between two documents, as long as the following conditions are met:

双方の文書は`同一-生成元$である。 ◎ Both documents are of the same origin;
当の~pageは、当の~navi全体を通して可視である。 ◎ The page is visible throughout the entire course of the navigation;
当の~naviは、利用者が［当の~pageとヤリトリする（例：~linkを~clickする／~formを提出する）／ `traverse$l する（履歴を前後へ辿る）ために~browser~UIとヤリトリする］ことにより起動された。これには、例えば，~URL~barにより起動される~navi 【言い換えれば、新-文書への~naviは旧-文書とは独立に起動されたとき】は除外される。 ◎ The user initiates the navigation by interacting with the page, e.g. by clicking a link or submitting a form; or by interacting with the browser UI to do a traverse navigation (back/forward). This excludes, for example, navigations initiated by the URL bar;
当の~naviには非同一-生成元な~redirectは生じなかった。 ◎ the navigation didn’t include cross-origin redirects; and
両~文書とも、 `view-transition$at 規則を利用して，非同一-文書な~view遷移を~opt-inした。 ◎ both documents opted in to cross-document view transitions, using the @view-transition rule.

より詳細は、 `§ ~lifecycle＠#lifecycle$ を見よ。 ◎ See the lifecycle section for more details.

2.1.2. 新-状態が安定~化するまでの待機-法

同一-文書な~view遷移においては、作者は，当の遷移の新-状態がいつ安定~状態になるかを — `startViewTransition()$m に渡した~callback利用することにより — 指示できる。非同一-文書な~view遷移は，宣言的なので、そのような明示的な~promiseは無い。代わりに，~UAは、［当の文書がいつ安定~状態に達したか］を`具現化を阻む仕組み＠~HTMLdom#render-blocking-mechanism$に依拠して裁定する。この仕方においては、作者は，当の遷移を次に挙げるときまで — そこに挙げるものを利用することにより — 遅延できる： ◎ In same-document view transitions, the author can indicate when the new state of the transition is in a stable state by using the callback passed to startViewTransition. Since cross-document view transitions are declarative, there is no such explicit promise. Instead, the user agent relies on the render-blocking mechanism to decide when the document has reached a stable state. In this way, the author can use the blocking attribute, to delay the transition until:

期待されるすべての~scriptは、実行された ⇒ 該当する各 `script$e 要素の `blocking$a 属性 ◎ All expected scripts are executed, by using the script’s blocking attribute on required scripts.
期待されるすべての~styleは、実行された ⇒ 該当する各 `style$e 要素の `blocking$aL 属性 ◎ All expected styles are executed, by using the style or link’s blocking attribute on required styles.
期待されるすべての~HTML要素は、構文解析器により~~処理された ⇒ `link$e 要素の【 `rel^a 属性~用の~keyword】 `expect$v ◎ All expected HTML elements are seen by the parser, using an expect HTMLLinkElement element.

注記：具現化を阻む仕組みを利用し過ぎると、旧-状態が長い時間~凍結され続ける結果，目障りな利用者~体験にもなり得る。これを避けるためには、［具現化を阻んでいる要素が適時な方式で可用になる］ことを確保することを勧める。 ◎ Note: overusing the render-blocking mechanism could make it so that the old state remains frozen for a long time, resulting in a jarring user experience. To avoid this, it’s advised to ensure that the render-blocking elements are available in a timely manner.

この例では、旧-文書の最後の~frameが示されてから， ~AND↓ が満たされるまで~animationは遅延されることになる： ◎ In this example, the last frame of the old document will be shown, and the animation will be delayed, until all the following conditions are met:

~stylesheet `style.css^v は適用された — 新-状態が正しい~styleを有することを確保するため ◎ style.css is applied, to ensure the new state has the correct styles
~script `fixup.js^v は走った — 当の呈示が，それに基づく修繕に伴って~~最新になることを確保するため。 ◎ fixup.js is run, to ensure the presentation is up to date with script-based fixups.
要素 `main-article^v は、見つけられ, 構文解析された — 当の遷移を続行する前に，十分な内容が読込まれることを確保するため。 ◎ The main-article section is seen and parsed, to ensure enough of the content is loaded before allowing the transition to proceed.

<!DOCTYPE html>
<html>
  <head>
    <!-- 
次の~stylesheetは、
既定では具現化を阻むことになる：
◎
This will be render-blocking by default
 -->
    <link rel="stylesheet" href="style.css">

    <!-- 
次の~scriptは、
~layoutを修繕する。
それは、
【 `blocking^a 属性により】具現化を阻むものとして~markされ、
その結果，~view遷移が作動化される前に走ることが確保される：
◎
Since this script fixes up the layout, marking it as render blocking will ensure it's run before the view transition is activated
 -->
    <script async href="fixup.js" blocking="render"></script>

    <!-- 
遷移を作動化する前に，
`main-article^v 要素が見つけられ, 全部的に構文解析されるまで待機するようにする：
◎
Wait until the main-article element is seen and fully parsed before activating the transition
 -->
    <link rel="expect" href="#main-article" blocking="render">
  </head>
  <body>
    <header>...</header>
    <main>
      <article id="main-article">...</article>
    </main>
    <article id="secondary-article">...</article>
  </body>
</html>

2.1.3. ~custom化

`ViewTransition$I ~objは、 ~scriptにより遷移を~custom化することを可能化する。 ~view遷移の~lifecycle全体にわたって利用される `ViewTransition$I ~objは、同一-文書な~view遷移~用には `startViewTransition()$m の~callから返された 1 個だけであり，非同一-文書な~view遷移~用には 2 個 — 旧-文書~内のそれ, 新-文書~内のそれ — ある。 ◎ The ViewTransition object enables customizing the transition in script. Same-document view transitions use a single ViewTransition object returned from the startViewTransition call for the entire lifecycle. Cross-document view transitions have two ViewTransition objects, one in the old document and one in the new document.

2.1.3.1. 旧-文書における~view遷移の取扱い

`pageswap$et ~eventは、［文書が~unloadされつつあり，別の文書に切替わる前］における最後の時点に発火される。それは、［ ~view遷移がその場を占めつつあるかどうかを見出す］ため，および［当の~view遷移に対し，［ `types$m を利用して~custom化して，捕捉される要素に対し間際の変更を為す］か［必要yなら飛ばす］］ために利用できる。 `PageSwapEvent$I ~interfaceの `viewTransition$m1 は、当の~naviが ~view遷移に適格なときには ~NULL 以外になり， `ViewTransition$I ~objを返す。その `activation$m は、 ~redirect後の~URLの様な，当の~naviについての~~便利な情報を供する~objを返す。その `finished$m ~promiseは、当の文書が後で`~BF~cache$から復旧される事例において，遷移の後に片付けるために利用できる。 ◎ The pageswap event is fired at the last moment before a document is about to be unloaded and swapped by another document. It can be used to find out whether a view transition is about to take place, customize it using types, make last minute changes to the captured elements, or skip it if necessary. The PageSwapEvent interface has a viewTransition object, which would be non-null when the navigation is eligible to a view transition, and a activation object, providing handy information about the navigation, like the URL after redirects. The transition’s finished promise can be used for cleaning up after the transition, in case the document is later restored from BFCache.

2.1.3.2. 新-文書における~view遷移の取扱い

`pagereveal$et ~eventは、［新-文書を成す最初の~frameを呈示する直前］に発火される。それは、 `viewTransition$m 属性を~queryすることにより，［当の~view遷移は依然として妥当であるか否か］を見出すために利用できる。同一-文書な~view遷移と類似に、作者は，この時点で［［異なる `types$m を選定して，捕捉される要素に対し間際の変更を為す／当の遷移を~animateするためにそれが準備済みになる（ `ready$m ~promiseが解決される）まで待機する］か［当の遷移をまるごと飛ばす］ことができる。 ◎ The pagereveal event is fired right before presenting the first frame of the new document. It can be used to find out if the view transition is still valid, by querying the viewTransition attribute. Similar to a same-document view transition, the author can now select different types, make last minute changes to the captured elements, wait for the transition to be ready in order to animate it, or skip it altogether.

2.1.4. ~lifecycle

◎非規範的

`文書$ %旧-文書から`文書$ %新-文書への成功裡な［非同一-文書な~view遷移］は、次に挙げる相を順に経る： ◎ A successful cross-document view transition goes through the following phases:

%旧-文書においては： ◎ In the old Document:
1. 利用者は、［ ~linkを~clickする／ ~formを提出する／ ~browserの “戻る” ~buttonを押す］などにより，~naviを起動する。 ◎ The user initiates a navigation, by clicking a link, submitting a form, pressing the browser’s back button, etc.
  
  注記： ~naviには，~view遷移を誘発しないものもある — 例：~URL~bar内に新たな~addressを打込んだとき。 ◎ Note: some navigations do not trigger a view-transition, e.g. typing a new address in the URL bar.
2. %新-文書は作動化されるに準備済みになったとき、 `pageswap$et ~event %~event が発火される。 ◎ When the new Document is ready to be activated, the pageswap event is fired.
3. %~event の `viewTransition$m1 属性は、次が満たされるならば `ViewTransition$I ~obj %遷移になる ⇒ ［当の~naviは`同一-生成元$である］~AND［非同一-生成元な~redirectは無い］~AND［ %旧-文書は`非同一-文書な~view遷移を~opt-inした＠#cross-doc-opt-in$ ］ ◎ If the navigation is same origin, has no cross-origin redirects, and the old Document has opted in to cross-document view transitions, the event’s viewTransition attribute would be a ViewTransition object.
4. 作者は、今や， %遷移を~custom化できる（例： `types$m を用いて %遷移にて`作動中な型~群$vTを変異させる／ `skipTransition()$m を用いて %遷移をまるごと飛ばす）。 ◎ The author can now customize the transition, e.g. by mutating its types, or skip it altogether.
5. %遷移が飛ばされなかった場合、 %旧-文書の`状態が捕捉される＠~CSSVT#capture-the-old-state$。 ◎ If the ViewTransition is not skipped, the state of the old document is captured.
6. 当の~naviを続行する — %旧-文書が~unloadされ， %新-文書が今や作動中になる。 ◎ The navigation proceeds: the old Document is unloaded, and the new Document is now active.
次に， %新-文書においては： ◎ Then, in the new Document:
1. %新-文書が最初の`描画~機会$用に準備済みになったとき、 %新-文書に向けて `pagereveal$et ~event %~event が発火される。 ◎ When the new Document is ready for its first rendering opportunity, an event named pagereveal is fired on the new Document, with a viewTransition attribute.
2. %~event の `viewTransition$m 属性が返す `ViewTransition$I ~obj %遷移の `updateCallbackDone$m ~promiseは、すでに解決-済みであり，その`捕捉された要素$は %旧-文書から拡充される。 ◎ This ViewTransition's updateCallbackDone promise is already resolved, and its captured elements are populated from the old Document.
3. ここでは、作者には， %遷移を~custom化する別の機会が与えられる（例： `types$m により %遷移にて`作動中な型~群$vTを変異させる／ `skipTransition()$m により %遷移をまるごと飛ばす）。 ◎ This is another opportunity for the author to customize the transition, e.g. by mutating its types, or skip it altogether.
4. %遷移の “新-” 状態として %新-文書の`状態が捕捉される＠~CSSVT#capture-the-new-state$。 ◎ The state of the new document is captured as the "new" state of the transition.
5. 以降， %遷移は、同一-文書な遷移と類似な流儀で — `~view遷移を作動化する$手続きに従って — 継続する。 ◎ From this point forward, the transition continues in a similar fashion to a same-document transition, as per activate view transition.

2.2. 例

`~level 1$ の `§ 例＠~CSSVT#examples$ における最初の例と同じ~cross-fadeを生成するが、複数の文書にまたがる【 “非同一-文書である” 】 — ~JSは必要ない。 ◎ To generate the same cross-fade as in the first example CSS View Transitions 1 § 1.6 Examples, but across documents, we don’t need JavaScript.

代わりに，~page 1, ~page 2 両者において ~naviに対し~view遷移を誘発することを~opt-inする： ◎ Instead, we opt in to triggering view-transitions on navigation in both page 1 and page 2:

/* 
両~文書において：
◎
in both documents:
 */
@view-transition {
  navigation: auto;
}

互いの~page間の~linkは、例 1 による~cross-fade遷移を生成する。例 2, 3, 4 による効果を達成するためには、単純に両~文書~内に疑似要素~用の~CSSを~~設置する。 ◎ A link from page 1 to or from page 2 would generate a crossfade transition for example 1. To achieve the effect examples 2, 3 & 4, simply put the CSS for the pseudo-elements in both documents.

`view-transition$at 規則は、媒体~queryと一緒に利用できることに注意。例えば，次は、 ~screenの横幅が【`600px^v 】より大きいときに限り遷移を遂行することになる： ◎ Note that the @view-transition rule can be used together with media queries. For example, this would only perform the transition when the screen width is greater than:

@view-transition {
  navigation: auto;
}

@media (max-width: 600px) {
  navigation: none;
}

`例 5＠~CSSVT#_example-5$ の効果を達成するためには、次を行う必要がある： ◎ To achieve the effect in example 5, we have to do several things:

両~pageにおいて，~naviにより誘発される~view遷移を~opt-inする。 ◎ Opt-in to navigation-triggered view-transitions in both pages.
新-文書に~click~~地点を渡す — 例： `sessionStorage$m を介して。 ◎ Pass the click location to the new document, e.g. via sessionStorage.
`pagereveal$et を利用して，新-文書~内の `ViewTransition$I ~objを横取する。 ◎ Intercept the ViewTransition object in the new document, using the pagereveal event.

両~page内には次がある： ◎ In both pages:

@view-transition {
  navigation: auto;
}

旧-~page内には次がある： ◎ In the old page:

addEventListener('click', %event => {
  sessionStorage.setItem("lastClickX", %event.clientX);
  sessionStorage.setItem("lastClickY", %event.clientY);
});

新-~page内には次がある： ◎ In the new page:

/* 
これは、
初期~読込nと再-作動化どちらに対しても，
`~BF~cache$から走らすことになろう。
◎
This would run both on initial load and on reactivation from BFCache.
 */
addEventListener("pagereveal", async %event => {
  if (!%event.viewTransition)
    return;

  const %x = sessionStorage.getItem("lastClickX") ?? window.innerWidth / 2;
  const %y = sessionStorage.getItem("lastClickY") ?? window.innerHeight / 2;

  const %endRadius = Math.hypot(
    Math.max(%x, window.innerWidth - %x),
    Math.max(%y, window.innerHeight - %y)
  );

  await event.viewTransition.ready;

  /* 
新-文書の~viewを~animateする
◎
Animate the new document's view
 */
  document.documentElement.animate(
    {
      clipPath: [
        ~BQんcircle(0 at ${%x}px ${%y}px)~BQん,
        ~BQんcircle(${%endRadius}px at ${%x}px ${%y}px)~BQん,
      ],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(%root)'
    }
  );
})

［ ~naviの~propたちに基づいて，どの要素が捕捉されるか］および［ある種の画像が読込まれるかどうか］を選ぶためには： ◎ To choose which elements are captured based on properties of the navigation, and whether certain images are loaded:

旧-~pageにおいては： ◎ In the old page:

window.addEventListener("pageswap", %event => {
  /* 
例えば［
当の~pageは非可視であった／非同一-文書な~naviである
］とき：
◎
For example, the page was hidden, or the navigation is cross-document.
 */
  if (!%event.viewTransition)
    return;

  /* 
履歴を前後へ辿る~navi用には、
~view遷移は求まれない場合：
◎
If you don't want view transition for back/forward navigations...
 */
  if (%event.activation.navigationType === "traverse") {
    %event.viewTransition.skipTransition();
  }

  const %newURL = new URL(%event.activation.entry.url);
  if (%newURL.pathname === "/details" && %thumbnail.complete) {
    %thumbnail.classList.add("transition-to-hero");

    /* 
~pageが`~BF~cache$から復旧された場合には、
状態を片付ける：
◎
This will cleanup the state if the page is restored from BFCache.
 */
    %event.viewTransition.finished.then(() => {
      %thumbnail.classList.remove("transition-to-hero");
    });
  }

});

新-~pageにおいては： ◎ In the new page:

window.addEventListener("pagereveal", %event => {
  /* 
例えば［
~pageは非可視であった／
非同一-文書な~naviである／
旧-文書における遷移は飛ばされた
］とき：
◎
For example, the page was hidden, the navigation is cross-document, or the transition was skipped in the old document.
 */
  if (!%event.viewTransition)
    return;

  const %oldURL = new URL(navigation.activation.from.url);
  if (%newURL.pathname === "/list") {
    %event.viewTransition.types.add("coming-from-list");

    /* 
当の~view遷移が完遂するまで， %thumbnail を示す：
◎
This will show the thumbnail until the view transition is finished.
 */
    if (!%hero.complete) {
      setToThumbnail(%hero);
      %event.viewTransition.finished.then(() => {
        setToFullResolution(%hero);
      })
    }
  }
});

2.3. 非同一-文書な~view遷移の~opt-in法

2.3.1. `view-transition^at 規則

`view-transition@at ~at-規則は、次を指示するために利用される ⇒ 非同一-文書~naviは、 `ViewTransition$I を設定しておいて作動化するベキである【順に，`非同一-文書な~view遷移を設定しておく$, `~view遷移を作動化する$】 ◎ The @view-transition rule is used by a document to indicate that cross-document navigations should setup and activate a ViewTransition.

`view-transition$at 規則の構文は： ◎ The @view-transition rule has the following syntax:

@view-transition {
  `declaration-list$t
}

`view-transition$at 規則は、次に挙げる記述子を受容する ⇒＃ `navigation$d, `types$d ◎ The @view-transition rule accepts the navigation and types descriptors.

注記：既定の挙動に倣い、 `view-transition$at 規則は，`条件付き~group規則$ — `media$at や `supports$at など — の内側に入子にできる。 ◎ Note: as per default behavior, the @view-transition rule can be nested inside a conditional group rule such as @media or @supports.

`文書$ %文書用の `view-transition$at 規則が変化したときは、 ~UAは，次を遂行するとする ⇒ `外へ出る遷移~用の~opt-in状態を更新する$( %文書 ) ◎ When the @view-transition rule changes for Document document, the user agent must update the opt-in state for outbound transitions given document.

注記：これ【どれ？】は、真偽値をとる何かに~cacheする必要がある — 結果【何の？】は、 ~navigateするとき，`並列的$に読取る必要があるので。 ◎ Note: this needs to be cached in the boolean because the result needs to be read in parallel, when navigating.

2.3.2. `navigation^d 記述子

◎述 `navigation@d ◎用 `view-transition$at ◎値 `auto$vN | `none$vN ◎初 `none$vN ◎表終

`navigation$d 記述子は、［ある種の種別の~naviを遂行する］ときに［ある~view遷移を自動的に開始する］ことを~opt-inする。それは、［旧-文書, 新-文書］どちらにも在ることが要求される【！Must be present】。 ◎ The 'navigation' descriptor opts in to automatically starting a view transition when performing a navigation of a certain type. Must be present on both the old and new document.

`none@vN

遷移は無い。 ◎ There will be no transition.

`auto@vN

遷移は、当の~naviが ~AND↓ を満たす場合には可能化されることになる：

同一-生成元である
非同一-生成元な~redirectを伴わない
~OR↓
- その `NavigationType$I ~EQ `traverse$l
- ［その `NavigationType$I ~IN { `push$l, `replace$l } ］~AND［ `~naviに対する利用者-関与i$ ~NEQ `~browser~UI$i ］
【 `NavigationType^I は、 `window.navigation＠~HTMLnavAPI#dom-window-navigation$m の［ `transition＠~HTMLnavAPI#dom-navigation-transition$m, `activation＠~HTMLnavAPI#dom-navigation-activation$m ］どちらかの `navigationType^m を指すと思われるが、どちらかは，はっきりしない（どちらでも同じかもしれない）。】

◎ The transition will be enabled if the navigation is same-origin, without cross-origin redirects, and whose NavigationType is • traverse, or • push or replace, with user navigation involvement not equal to "browser UI".

注記： `auto$vN から除外される~naviは、例えば，次を介して~navigateすることである ⇒＃ ~URL~bar／ ~bookmarkを~clickすること利用者や~scriptが起動した `reload$l ◎ Note: Navigations excluded from auto are for example, navigating via the URL address bar or clicking a bookmark, as well as any form of user or script initiated reload.

`view-transition$at ~at-規則は、 ~CSSの前方-互換な構文解析~要件に適合する — この規則を解さない適合t構文解析器は、 ~errorを伴うことなく，それを無視することになる。 ~UAは、［この規則を成す記述子のうち，次のいずれかに該当するもの］をまるごと無視するモノトスル — そのような記述子は、当の~at-規則を無効にすることはない：

自身が［認識しない／実装していない］
その値は、この仕様 — その将来の~versionも含む — にて与えられる文法に合致しない

◎ This at-rule conforms with the forward-compatible parsing requirement of CSS; conformant parsers that don’t understand these rules will ignore them without error. Any descriptors that are not recognized or implemented by a given user agent, or whose value does not match the grammars given here or in a future version of this specification, must be ignored in their entirety; they do not make the @view-transition rule invalid.

2.3.3. ~CSSOMによる `view-transition$at 規則への~access法

`CSSViewTransitionRule$I は、ある `view-transition$at 規則を表現する。 ◎ The CSSViewTransitionRule represents a @view-transition rule.

[`Exposed$=Window]
interface `CSSViewTransitionRule@I : `CSSRule$I {
  readonly attribute `CSSOMString$ `navigation$m;
  [`SameObject$] readonly attribute `FrozenArray$<`CSSOMString$> `types$m1;
};

`navigation@m 取得子~手続きは ⇒ ~RET ［コレが表現する `view-transition$at 規則に `navigation$d 記述子は存在するならば，その値／ ~ELSE_ 空~文字列］ ◎ The navigation getter step is to return the value of the corresponding navigation descriptor if one exists, otherwise the empty string.

`types@m1 取得子~手続きは ⇒ ~RET ［コレが表現する `view-transition$at 規則に `types$d 記述子は存在するならば，その値／ ~ELSE_ 空な`~list$ ］ ◎ The types getter steps is to return the value of the corresponding types descriptor if one exists, otherwise an empty list.

3. 選択的な~view遷移

3.1. 概観

◎非規範的

~page用の~view遷移が 1 つしかない単純な局面においては、関与している各~要素に `view-transition-name$p ~propを設定することで足るはずである。しかしながら，より複階的な局面においては、作者は，様々な~view遷移を宣言して，うち 1 つだけを同時に走らすよう求めることもあろう。例えば、 ~navi~barを~clickしたときは，~page全体を滑らす一方で、 ~listを成すいずれかの~itemが~dragされたときは，~listを~sortするなど。 ◎ For simple pages, with a single view transition, setting the view-transition-name property on participating elements should be sufficient. However, in more complex scenarios, the author might want to declare various view transitions, and only run one of them simultaneously. For example, sliding the whole page when clicking on the navigation bar, and sorting a list when one of its items is dragged.

［各~view遷移が必要なものに限り捕捉すること］および［異なる遷移どうしが互いに干渉しない］ようにするため、この仕様は，`作動中な型~群$vTの概念を — ［ `active-view-transition$ps, `active-view-transition-type()$ps ］疑似類と併せて — 導入する。 ◎ To make sure each view transition only captures what it needs to, and different transitions don’t interfere with each other, this spec introduces the concept of active types, alongside the :active-view-transition and :active-view-transition-type() pseudo-classes.

［ `active-view-transition$ps, `active-view-transition-type()$ps ］は，どちらも［ `文書$にて`作動中な~view遷移$doc %遷移 ~NEQ ~NULL ］のときに限り，`文書$の`文書~要素$に合致するが、 `active-view-transition-type()$ps が合致するのは，さらに［その引数を成す【いずれかの】型が %遷移にて`作動中な型~群$vTに合致する場合］に限られる。 ◎ :active-view-transition matches the document element when it has an active view transition,＼ and :active-view-transition-type() matches the document element if the types in the selectors match the active view transition's active types.

`ViewTransition$I にて`作動中な型~群$vTを拡充するためには、次に挙げる仕方がある： ◎ The ViewTransition's active types are populated in one of the following ways:

`startViewTransition()$m に対する引数の一部【 `StartViewTransitionOptions$I の `types$mb 】として渡す。 ◎ Passed as part of the arguments to startViewTransition(callbackOptions)
いつでも、当の遷移の `types$m を利用して変異する。 ◎ Mutated at any time, using the transition’s types
非同一-文書な~view遷移~用には、 `types$d 記述子を利用して宣言する。 ◎ Declared for a cross-document view transition, using the types descriptor.

3.2. 例

例えば、開発者は，次の方式で遷移を開始するかもしれない： ◎ For example, the developer might start a transition in the following manner:

document.startViewTransition({update: %updateTheDOMSomehow, types: ["slide-in", "reverse"]});

これは、次に挙げる選択子をいずれも作動化することになる： ◎ This will activate any of the following selectors:

:root:active-view-transition-type(slide-in) {}
:root:active-view-transition-type(reverse) {}
:root:active-view-transition-type(slide-in, reverse) {}
:root:active-view-transition-type(slide-in, something-else) {}
:root:active-view-transition {}

一方で，遷移~型を供することなく遷移を開始した場合、 `active-view-transition^ps に限り，作動化することになる： ◎ While starting a transition without providing transition types, would only activate ':active-view-transition'':

document.startViewTransition(%updateTheDOMSomehow);
/* 
または
◎
or
 */
document.startViewTransition({update: %updateTheDOMSomehow});

/* 
次に挙げるものは、
作動中になる：
◎
This would be active
 */
:root { }
:root:active-view-transition {}

/* 
次に挙げるものは、
作動中にならない：

◎
This would not be active
 */
:root:active-view-transition-type(slide-in) {}
:root:active-view-transition-type(any-type-at-all-except-star) {}

3.3. 作動中な~view遷移に基づく選定-法

3.3.1. `active-view-transition^ps 疑似類

`active-view-transition@ps 疑似類は、当の文書にて`作動中な~view遷移$docは ~NULL でないならば，当の文書の根~要素に適用される。 ◎ The :active-view-transition pseudo-class applies to the root element of the document, if it has an active view transition.

`active-view-transition$ps の`詳細度$は、 1 個の疑似類~選択子と同じになる。 ◎ The specificity of an :active-view-transition is one pseudo-class selector.

`active-view-transition$ps 疑似類は、次を満たす`文書~要素$に合致する ⇒ その`~node文書$にて`作動中な~view遷移$doc ~NEQ ~NULL ◎ An :active-view-transition pseudo-class matches the document element when its node document has an non-null active view transition.

3.3.2. `active-view-transition-type()^ps 疑似類

`active-view-transition-type()@ps 疑似類は、当の文書にて`作動中な~view遷移$docは［ ~NULL でない, かつ【いずれかの引数に】合致している］ならば，当の文書の根~要素に適用される。その構文は： ◎ The :active-view-transition-type() pseudo-class applies to the root element of the document, if it has a matching active view transition. It has the following syntax definition:

:active-view-transition-type(`custom-ident$t#)

`active-view-transition-type()$ps の`詳細度$は、 1 個の疑似類~選択子と同じになる。 ◎ The specificity of an :active-view-transition-type() is one pseudo-class selector.

`active-view-transition-type()$ps 疑似類は、 ~AND↓ を満たす`文書~要素$に合致する： ◎ An :active-view-transition-type() pseudo-class matches the document element when＼

その`~node文書$にて`作動中な~view遷移$doc %~view遷移 ~NEQ ~NULL ◎ its node document has an non-null active view transition,＼
引数を成すある `custom-ident$t ~IN %~view遷移にて`作動中な型~群$vT ◎ whose active types contains at least one of the <custom-ident> arguments.

3.4. 進行中な~view遷移の型~群の変更-法

`ViewTransition$I ~interfaceは、次に従って拡張される： ◎ The ViewTransition interface is extended as follows:

[`Exposed$=Window]
interface `ViewTransitionTypeSet@I {
  setlike<`DOMString$>;
};

[`Exposed$=Window]
partial interface `ViewTransition$I {
  attribute `ViewTransitionTypeSet$I `types$m;
};

`ViewTransitionTypeSet$I ~objは、［特別な意味論を伴わない文字列］たちが成す`有順序~集合$を表現する。 ◎ The ViewTransitionTypeSet object represents a set of strings, without special semantics.

注記： `ViewTransitionTypeSet$I は、 `active-view-transition-type()$ps 用には妥当でない文字列を包含し得る — 例： `custom-ident$t でない文字列。 ◎ Note: a ViewTransitionTypeSet can contain strings that are invalid for :active-view-transition-type, e.g. strings that are not a <custom-ident>.

`types@m `取得子~手続き$は ⇒ ~RET コレにて`作動中な型~群$vT ◎ The types getter steps are to return this's active types.

3.5. 非同一-文書な~view遷移~用の遷移~型の作動化-法： `types^d 記述子

◎述 `types@d ◎用 `view-transition$at ◎値 `none^v | `custom-ident$t+ ◎初 `none^v ◎表終

`types$d 記述子は、 ~view遷移を［捕捉する／遂行する］ときに，当の遷移にて`作動中な型~群$vTを設定する — それは、 `startViewTransition(callbackOptions)$m を — %callbackOptions の `types$mb にその値を与える下で — ~callすることに等価になる。 ◎ The 'types' descriptor sets the active types for the transition when capturing or performing the transition, equivalent to calling startViewTransition(callbackOptions) with that types.

注記： `types$d 記述子が適用されるのは、それを定義した`文書$に限られる。作者が選んだ型たちが成す集合を新-旧-両~文書~内で利用する責務は、作者にある。 ◎ Note: the types descriptor only applies to the Document in which it is defined. The author is responsible for using their chosen set of types in both documents.

4. ~view遷移~疑似要素たちの~styleの共有-法

4.1. 概観

◎非規範的

~DOM内にある複数の要素を類似な仕方で~styleするときには、 `class$a 属性が共通的に利用される：複数の要素にまたがって共有される名前を設定してから、 `~class選択子$を利用して共有される~styleを宣言するよう。 ◎ When styling multiple elements in the DOM in a similar way, it is common to use the class attribute: setting a name that’s shared across multiple elements, and then using the class selector to declare the shared style.

`有名~view遷移~疑似要素$ （例： `view-transition-group()$pe ）は、 ~DOM内には定義されず， `view-transition-name$p ~propを利用して定義される。 `view-transition-class$p ~propは、その目的~用に，~HTMLの`~class群$に等価なものを~view遷移に供する。 `view-transition-name$p を伴うある要素が `view-transition-class$p も有するときは、その値を成す各~classが疑似要素により選定-可能になる — 下の`例＠#vt-class-example$に見られるとおり。 ◎ The view transition pseudo-elements (e.g. view-transition-group()) are not defined in the DOM, but rather by using the view-transition-name property. For that purpose, the view-transition-class' CSS property provides view transitions with the equivalent of HTML classes. When an element with a view-transition-name also has a view-transition-class value, that class would be selectable by the pseudo-elements, as per the examples.

4.2. 例

この例が作成する遷移では、各~boxは，自前の名前の下で遷移に関与する一方で，すべての~boxの~animationに所要時間 1 秒を適用する： ◎ This example creates a transition with each box participating under its own name, while applying a 1-second duration to the animation of all the boxes:

<div class="box" id="red-box"></div>
<div class="box" id="green-box"></div>
<div class="box" id="yellow-box"></div>

div.box {
  view-transition-class: any-box;
  width: 100px;
  height: 100px;
}
#red-box {
  view-transition-name: red-box;
  background: red;
}
#green-box {
  view-transition-name: green-box;
  background: green;
}
#yellow-box {
  view-transition-name: yellow-box;
  background: yellow;
}

/* 
次の~styleは、
`view-transition-class$p のおかげで，すべての~boxに適用されることになる：
◎
The following style would apply to all the boxes, thanks to 'view-transition-class'
 */
::view-transition-group(*.any-box) {
  animation-duration: 1s;
}

4.3. `view-transition-class^p ~prop

◎名 `view-transition-class@p ◎値 `~noneC$v | `custom-ident$t+ ◎初 `none^v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎順文法に従う ◎ア離散的 ◎表終

`view-transition-class$p を利用すれば、複数の`有名~view遷移~疑似要素$に対し， `view-transition-name$p 【により指定された`~view遷移~名$】が異なっていても同じ~style規則を適用できる。 `view-transition-name$p は，旧-状態~内にある要素と新-状態~内にある対応している要素どうしを照合するために利用されるが、 `view-transition-class$p は， ~view遷移~疑似要素（ `view-transition-group()$pe, `view-transition-image-pair()$pe, `view-transition-old()$pe, `view-transition-new()$pe ）を利用して~styleを適用するために限り利用される。 ◎ The view-transition-class can be used to apply the same style rule to multiple named view transition pseudo-elements which may have a different view-transition-name. While view-transition-name is used to match between the element in the old state with its corresponding element in the new state, view-transition-class is used only to apply styles using the view transitionpseudo-elements (::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), ::view-transition-new()).

`view-transition-class$p は、要素を捕捉するために~markするものではないことに注意 — その利用は、［すでに `view-transition-name$p を有する要素を~styleする］ための追加的な仕方に限られる。 ◎ Note that view-transition-class by itself doesn’t mark an element for capturing, it is only used as an additional way to style an element that already has a view-transition-name.

`~noneC@v: 当の要素~用に生成される`有名~view遷移~疑似要素$に適用される~classは無い。 ◎ No class would apply to the named view transition pseudo-elements generated for this element.
`custom-ident$t+: 指定された `custom-ident$t 値（ `none^v 以外）すべてが、 `有名~view遷移~疑似要素$`選択子$内で利用されるときに適用される。 `none^v は、この~prop用の `custom-ident^t としては妥当でない — 別の `custom-ident^t と組合されたときでも。 ◎ All of the specified <custom-ident> values (apart from none) are applied when used in named view transition pseudo-element selectors. none is an invalid <custom-ident> for view-transition-class, even when combined with another <custom-ident>.; 各 “~view遷移~class” 【これら各 `custom-ident^t 】は、 `~tree視野な名前$である。 ◎ Each 'view transition class' is a tree-scoped name.; 注記：同じ `view-transition-name$p が，遷移を成す［旧-, 新- ］両~状態~内にある要素~用に指定された場合、 `view-transition-class$p の値は，新-状態~用のものに限り適用される。このことは、非同一-文書な~view遷移~用にも適用される：旧-文書~内で指定された~classは、対応する `view-transition-name$p が新-文書~内に指定されなかった場合に限り，適用されることになる。 ◎ Note: If the same view-transition-name is specified for an element both in the old and new states of the transition, only the view-transition-class values from the new state apply. This also applies for cross-document view transitions: classes from the old document would only apply if their corresponding view-transition-name was not specified in the new document.

4.4. 有名~view遷移~疑似要素に対する追加

`有名~view遷移~疑似要素$ （ `view-transition-group()$pe, `view-transition-image-pair()$pe, `view-transition-old()$pe, `view-transition-new()$pe ）は、次の構文を~supportするよう拡張される： ◎ The named view transition pseudo-elements (view-transition-group(), view-transition-image-pair(), view-transition-old(), view-transition-new()) are extended to support the following syntax:

::view-transition-group(`pt-name-and-class-selector$t)
::view-transition-image-pair(`pt-name-and-class-selector$t)
::view-transition-old(`pt-name-and-class-selector$t)
::view-transition-new(`pt-name-and-class-selector$t)

`pt-name-and-class-selector$t の構文は： ◎ ↓ where <pt-name-selector> works as previously defined,＼ and <pt-name-and-class-selector> has the following syntax definition:

`pt-name-and-class-selector@t
	= `pt-name-selector$t `pt-class-selector$t?
	| `pt-class-selector$t
`pt-class-selector@t
	= ['.' `custom-ident$t]+

ここで， `pt-name-selector$t は、 `~level 1$ にて定義されたとおりに働く。 ◎ ↑

上の文法は、［次に挙げる箇所においては，空白は禁止される］ものと解釈される： ◎ When interpreting the above grammar, white space is forbidden:

`pt-name-selector$t, `pt-class-selector$t の合間 ◎ Between <pt-name-selector> and <pt-class-selector>
`pt-class-selector$t を成す各~成分の合間 ◎ Between any of the components of <pt-class-selector>.

`有名~view遷移~疑似要素$`選択子$に合致する要素は、 `pt-class-selector$t 空であったとするとき合致する要素 %疑似要素のうち，次を満たすものに合致する ⇒ `pt-class-selector$t を成すどの `custom-ident^t も次を満たす ⇒ `custom-ident^t ~IN 当の~view遷移の`有名~要素~群$vT[ %疑似要素の`~view遷移~名$【！ `view-transition-name$p】 ] の`~class~list$cE ◎ A named view transition pseudo-element selector which has one or more <custom-ident> values in its <pt-class-selector> would only match an element if the class list value in named elements for the pseudo-element’s view-transition-name contains all of those values.

`有名~view遷移~疑似要素$`選択子$の`詳細度$は：

次を満たす場合は `zero^en 【すなわち ( 0, 0, 0 ) 】になる ⇒ ［ `pt-name-selector$t は `*^css （`全称~選択子$）をとる］~OR［ `pt-class-selector$t は空である］
~ELSE_ `型~選択子$と等価【すなわち ( 0, 0, 1 ) 】になる

◎ The specificity of a named view transition pseudo-element selector with either: • a <pt-name-selector> with a <custom-ident>; or • a <pt-class-selector> with at least one <custom-ident>, ◎ is equivalent to a type selector. ◎ The specificity of a named view transition pseudo-element selector with a * argument and with an empty <pt-class-selector> is zero.

5. `document.startViewTransition()^m の拡張-法

dictionary `StartViewTransitionOptions@I {
  `ViewTransitionUpdateCallback$I? `update@mb = null;
  `sequence$<`DOMString$>? `types@mb = null;
};

partial interface `Document$I {
  `ViewTransition$I `startViewTransition$m(optional (`ViewTransitionUpdateCallback$I or `StartViewTransitionOptions$I) %callbackOptions = {});
};

`startViewTransition(callbackOptions)@m `~method手続き$は： ◎ The method steps for startViewTransition(callbackOptions) are as follows:

%更新~callback ~LET ~NULL ◎ Let updateCallback be null.
~IF［ %callbackOptions は `ViewTransitionUpdateCallback$I である］ ⇒ %更新~callback ~SET %callbackOptions ◎ If callbackOptions is a ViewTransitionUpdateCallback, set updateCallback to callbackOptions.
~ELIF［ %callbackOptions は `StartViewTransitionOptions$I である］ ⇒ %更新~callback ~SET %callbackOptions[ "`update$mb" ] ◎ Otherwise, if callbackOptions is a StartViewTransitionOptions, then set updateCallback to callbackOptions’s update.
%作動中な遷移 ~LET コレにて`作動中な~view遷移$doc ◎ ↓
~IF［ %作動中な遷移 ~NEQ ~NULL ］~AND［ %作動中な遷移の`外へ出る捕捉-後の手続き$vT ~NEQ ~NULL ］： ◎ If this’s active view transition is not null and its outbound post-capture steps is not null, then:
1. %飛ばされる前の遷移 ~LET コレに`関連な~realm$に属する新たな `ViewTransition$I — その ⇒＃ `更新~callback$vT ~SET %更新~callback ◎ Let preSkippedTransition be a new ViewTransition in this’s relevant realm whose update callback is updateCallback.
  
  注記：ここでは、当の遷移は決して作動化されないので， %飛ばされる前の遷移の `types$m は無視される。 ◎ Note: The preSkippedTransition’s types are ignored here because the transition is never activated.
2. `~view遷移を飛ばす$( %飛ばされる前の遷移, `InvalidStateError$E 例外 ) ◎ Skip preSkippedTransition with an "InvalidStateError" DOMException.
3. ~RET %飛ばされる前の遷移 ◎ Return preSkippedTransition.
注記：この段は、［ `pageswap$et を発火した後に開始された同一-文書な遷移］は飛ばされることを確保する。 ◎ Note: This ensures that a same-document transition that started after firing pageswap is skipped.
%~view遷移 ~LET コレ上の［ `~level 1$ に定義される `startViewTransition＠~CSSVT#dom-document-startviewtransition$m 用の`~method手続き$ ］( %更新~callback ) ◎ Let viewTransition be the result of running the method steps for startViewTransition(updateCallback) given updateCallback.
~IF［ %callbackOptions は `StartViewTransitionOptions$I である］：【！%callbackOptions[ "`types$mb" ] を`~cloneする$】
1. %~token群 ~LET 新たな`有順序~集合$
2. %callbackOptions[ "`types$mb" ] を成す ~EACH( %~token ) に対し ⇒ %~token群に %~token を`付加する$set
3. %~view遷移にて`作動中な型~群$vT ~SET %~token群
◎ If callbackOptions is a StartViewTransitionOptions, set viewTransition’s active types to a clone of types as a set.
~RET %~view遷移 ◎ Return viewTransition.

6. `view-transition-name$p 自動的な決定-法

6.1. 概観

◎非規範的

要素がある`~view遷移$に関与するためには、一意な`~view遷移~名$【！ `view-transition-name$p 】を受取る必要がある。これは、同じ~view遷移~内に複数の要素が孕まれるときに，長々しく冗漫になり得る — とりわけ、それらのうち多くが同一-要素な遷移であって．［旧-状態, 新-状態］における`~view遷移~名$【！ `view-transition-name$p 】が同じである事例では。 ◎ For an element to participate in a view transition, it needs to receive a unique view-transition-name. This can be tedious and verbose when multiple elements are involved in the same view transition, especially in cases where many of those are same-element transitions, as in, the element has the same view-transition-name in the old and new state.

これは、 `view-transition-name$p を `auto$v に設定することで，もっと容易になる — 要素~用の`~view遷移~名$【！ `view-transition-name$p 】は、要素の`~ID$からとられるか，~IDが無い場合は【自動的に】生成される。 ◎ To make this easier, setting the view-transition-name to auto would generate a view-transition-name for the element, or take it from the element’s id if present.

6.2. 例

この例では、 ~listを~sortするときに~animateするための仕方として， ~view遷移が利用される： ◎ In this example, view transition is used to sort a list in an animated way:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  ...
</ul>

~listを成す各~itemは、普通は，一意な`~view遷移~名$【！ `view-transition-name$p 】を受取る【そうなるようにする必要がある】ことになろう【見本~code内では全部 `item1^v に設定されているが、 `item2^v 等々の誤記？】： ◎ Ordinarily, each of these items would have to receive a unique view-transition-name:

li:nth-child(1) { view-transition-name: item1; }
li:nth-child(2) { view-transition-name: item1; }
li:nth-child(3) { view-transition-name: item1; }
li:nth-child(4) { view-transition-name: item1; }
...

`auto$v を伴う次の~CSSでも、働くことになる： ◎ With auto, this CSS would work:

li {
  view-transition-name: auto;
}

6.3. `view-transition-name^p に対する追加

`view-transition-name$p ~propは、新たな~keyword `auto@v も受容する。 ◎ In addition to the existing values, the view-transition-name also accepts an auto keyword.＼

%要素の `view-transition-name$p の`使用~値$を解決するときは、その`算出d値$ %算出d値に応じて： ◎ To resolve the used value of view-transition-name for element: ◎ • Let computed be the computed value of view-transition-name.

`none$v ⇒ ~RET ~NULL 【 %要素には`~view遷移~名$は無い】 ◎ If computed is none, return null.
`custom-ident$t である ⇒ ~RET %算出d値 ◎ If computed is a <custom-ident>, return computed.
`auto$v ： ◎ Assert: computed is auto.
1. %~ID ~LET %要素の`~ID$ ◎ ↓
2. ~IF［ %~ID ~NEQ ε ］~AND［ %算出d値に`結付けられた根＠~CSSSCOPING#css-tree-scoped-name$ ~EQ %要素の`根$ ］ ⇒ ~RET %~ID ◎ If element has an associated id, and computed is associated with the same root as element’s root, then return the value of element’s id.
  
  注記：このことは、 `part()$pe 疑似要素に対しては，それに合致している要素【それを介して公開される要素】の`~ID$には解決されないことを意味する。 ◎ Note: this means that a ::part() pseudo-element wouldn’t resolve to its matching element’s id.
3. ~RET ある一意な文字列 — この文字列は、少なくとも［ %要素の`~node文書$ %文書にて`作動中な~view遷移$docの存続期間］においては，［ %要素用に一貫する, かつ %文書内で一意］であり続けるベキである。 ◎ Return a unique string. The string should remain consistent and unique for this element and Document, at least for the lifetime of element’s node document's active view transition.
  
  注記：この文字列は、 ~webからは観測-可能にはならず，内部~algo内で要素を~~特定するために利用される。 ◎ Note: this string is not web-observable, and is used for addressing the element in internal algorithms.
  
  注記：非同一-文書な~view遷移において利用されるときには、【旧-文書, 新-文書において】 `auto$v 値により生成される名前どうしは決して合致しない — その結果、外へ出る~view遷移~用の `view-transition-group()$pe 疑似要素は，内へ来る~view遷移~用のそれとは別々になる。 ◎ Note: When used in a cross-document view transition, generated auto values never match, resulting in separate ::view-transition-group() pseudo-elements, one exiting and one entering.

`auto$v により生成される`~view遷移~名$【！ `view-transition-name$p 】は、 `~tree視野な名前$である。 ◎ A view-transition-name generated by auto is a tree-scoped name.

7. 入子な~view遷移

7.1. 概観

◎非規範的

既定では、複数の要素に `view-transition-name^p を設定したときは，平坦な`~view遷移~tree$が生成される — すなわち、すべての `view-transition-group()$pe 疑似要素は， `view-transition$pe 疑似要素の子になる。これは，多くの単純な利用事例~用には足るが、平坦な~treeでは達成できない~style法の利用事例もある。真っ先に挙がる利用事例は、【~overflowなどによる】切取りである：平坦な~treeでは，すべての疑似要素は`~snapshot包含塊$で切取られるので、通常の~treeにおいて要素が切取られると，その部分が~view遷移の間に失われ、その結果，視覚-効果が崩れる。次に挙げる効果は、平坦な~treeにおいて期待されない視覚-効果を伴い得る： ◎ By default, setting view-transition-name on multiple elements generates a flat view transition tree, where all the ::view-transition-group() pseudo-elements are children of the ::view-transition pseudo-element. This is sufficient for many simple use-cases, but there are some styling use-cases that cannot be achieved with a flat tree. The most prominent use-case is clipping: with a flat tree, all pseudo-elements are clipped to the snapshot containing block, so clipping elements in the normal tree would lose their clipping during the view-transition, resulting in a broken visual effect. The effects that have can have an unexpected visual effect in a flat tree:

切取り（ `overflow$p, `clip-path$p, `border-radius$p ） ⇒ 切取りは、当の要素の子たちに影響する。 ◎ Clipping (overflow, clip-path, border-radius): clipping affects the children of the element.
`opacity$p, `mask-image$p, `filter$p ⇒ これらの効果は、 ~tree【これらを利用する要素を根とする下位tree】を全部的に~raster化した画像に対し，働くよう設計される — 各~itemに対し個別に働くのではなく。 ◎ opacity, mask-image and filter: These effects that are designed to work on a fully rasterized image of a tree, rather than on each item individually.
~3D変形（ `transform-style$p, `transform$p, `perspective$p ） ⇒ ~3D変形の~animationを成す全部的な範囲を表示するためには、何らかの階層が保たれる必要がある。 ◎ 3D transforms (transform-style, transform, perspective): to display the full range of 3D transform animations, some hierarchy needs to be kept.

これらの利用事例を可能化するため、この仕様は，［ ~view遷移~疑似要素たちを入子にすること］が成す概念を導入する。作者は、 `view-transition-group$p ~propを利用して［生成される `view-transition-group()$pe 疑似要素~用に “親~group” をアテガう］ことにより，`~view遷移~tree$内に階層を作成できる。 ◎ To enable these use cases, this specification introduces the concept of nesting view-transition pseudo-elements. By using the view-transition-group CSS property, the author can assign a "parent group" for a generated ::view-transition-group() pseudo-element, creating a hierarchy in the view transition tree.

7.2. 例

この例で作成される遷移の`~view遷移~tree$は、平坦になる代わりに入子にされる： ◎ This example creates a transition where the view transition tree is nested instead of flat:

<section class="container">
  <article>Content</article>
</section>

.container {
  view-transition-name: container;
}

.container,
::view-transition-group(container) {
  clip-path: circle();
}

article {
  view-transition-name: article;
  view-transition-group: container;
}

`clip-path$p を［包含している要素【 `.container^css 】, それ用に生成された疑似要素］両者に適用することにより，切取られたものは遷移の間も保全され、［当の容器【 `.container^css 】を参照している `view-transition-group$p を当の内部~要素【 `article^e 】に適用する］ことにより，［この切取りを適用することになる仕方］で当の~treeを “入子に” する。 ◎ By applying the clip-path to both the containing element and its generated pseudo-element, we preserve the clip during the transition, and by applying view-transition-group to the internal element referencing the container, we make the tree "nested" in a way that would apply this clipping.

7.3. `view-transition-group^p ~prop

◎名 `view-transition-group@p ◎値 `normal$v | `contain$v | `nearest$v | `custom-ident$t ◎初 `normal$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎順文法に従う ◎ア離散的 ◎表終

`view-transition-group$p ~propは、 `view-transition-name$p と伴に利用することで， `有名~view遷移~疑似要素$たちが成す階層を生成できる。 ◎ The view-transition-group property can be used in conjuction with view-transition-name to generate a hierarchy of named view transition pseudo-element.

`要素$ %要素の `view-transition-group$p の`使用~値$は、［ %要素のある先祖の `view-transition-name$p の値］ %名前または `none$v に解決される。 `有名~view遷移~疑似要素$を生成するとき、【`~view遷移~名$として】 %名前を伴う `view-transition-group()$pe は，［ %要素の `view-transition-name$p 用に生成される `view-transition-group()$pe ］の親になる。 ◎ The used value for view-transition-group resolves to a view-transition-name in its ancestor chain, or to none. When generating the named view transition pseudo-element, the ::view-transition-group() with that name would be the parent of the ::view-transition-group() generated for this element’s view-transition-name.

8. ~algo

8.1. ~data構造

8.1.1. 文書に対する追加

各`文書$は、次に挙げるものを追加的に有する： ◎ A Document additionaly has:

`内へ来る~view遷移~params@doc ⇒ ある`~view遷移~params$ ／ ~NULL — 初期~時は~NULLとする。 ◎ inbound view transition params ◎ a view transition params, or null. Initially null.
`外へ出る~view遷移を起動できるか@doc ⇒ 真偽値 — 初期~時は ~F とする。 ◎ can initiate outbound view transition • a boolean. Initially false.

注記：この値は、 ~navigateしている間に`並列的$に読取られ得る。 ◎ Note: this value can be read in parallel while navigating.

【［ “内へ来る（ `inbound^en ）〜” ／ “外へ出る（ `outbound^en ）〜” ］は、非同一-文書な遷移に利用される概念であり， “〜は［新-文書／旧-文書］に結付けられたものである” ことを意味する。】

8.1.2. `ViewTransition^I に対する追加

各 `ViewTransition$I は、次に挙げるものを追加的に有する： ◎ A ViewTransition additionally has:

`作動中な型~群@vT ⇒ ある `ViewTransitionTypeSet$I — 【それが表現する`~set~entry群＠~WEBIDL#dfn-set-entries$は】初期~時は空とする。 ◎ active types • A ViewTransitionTypeSet, initially empty.
`外へ出る捕捉-後の手続き@vT ⇒ ~NULL ／ある手続き — 初期~時は ~NULL とする。 ◎ outbound post-capture steps • Null or a set of steps, initially null.

8.1.3. 直列化-可能な~view遷移~params

`~view遷移~params@ は、次に挙げる`~item$sctからなる`構造体$である。その目的は、文書たちにまたがって，~view遷移~情報を直列化する【旧-文書から新-文書へ情報を渡す】ことにある： ◎ A view transition params is a struct whose purpose is to serialize view transition information across documents. It has the following items:

`有名~要素@vTP ⇒ `有順序~map$ — 各~entryの［ ~keyは文字列／値は`捕捉された要素$ ］を与える。 ◎ named elements • a map, whose keys are strings and whose values are captured elements.
`初期~snapshot包含塊~size@vTP ⇒ 2 個の実数 ( 横幅, 縦幅 ) が成す`~tuple$ ◎ initial snapshot containing block size • a tuple of two numbers (width and height).

8.2. ~view遷移の~page可視性~変化-時の手続きに対する追加

`~level 1$ の`~view遷移の~page可視性~変化-時の手続き$にて~queueされる~taskの末尾には、所与の ( %文書 ) に対し，次を遂行する段を挿入する： ◎ The next steps are appended to the tasks view transition page-visibility change steps given document, after the current steps in the queued task:

%文書の`内へ来る~view遷移~params$doc ~SET ~NULL ◎ Set document’s inbound view transition params to null.

注記：これは、 ~HTML仕様から~callされる。 ◎ Note: this is called from the HTML spec.

8.2.1. 捕捉された要素に対する拡張

構造体 `捕捉された要素$は、次に挙げる~item【！~field】も伴うベキである： ◎ The captured element struct should contain these fields, in addition to the existing ones:

`~class~list@cE ⇒ 文字列たちが成す`~list$ — 初期~時は空とする。 ◎ a list of strings, initially empty.
`包含ng~group名@cE ⇒ ~NULL／ある文字列 — 初期~時は ~NULL とする。 ◎ containing group name • Null or a string, initially null.
`~snapshot包含塊からの変形@cE ⇒ ある`行列$ — 初期~時は単位i行列とする。 ◎ transform from snapshot containing block • A matrix, initially the identity matrix.

8.3. `view-transition$at 規則の解決-法

`~view遷移~規則を解決する@ ときは、所与の ( `文書$ %文書 ) に対し： ◎ To resolve @view-transition rule for a Document document:

注記：これは、旧-文書, 新-文書どちらからも~callされる。 ◎ Note: this is called in both the old and new document.

~IF［ %文書の`可視性~状態$doc ~EQ `hidden^l ］ ⇒ ~RET `遷移を飛ばす^i ◎ If document’s visibility state is "hidden", then return "skip transition".
%合致している規則 ~LET %文書内に `view-transition$at 規則は［在るならばそれらのうち最後のもの／無いならば ε ］

【 `条件付き~group規則$内に入子にされ，条件が満たされないため無視される規則は、この段の目的においては，無かったものと見なされよう。】
◎ Let matchingRule be the last @view-transition rule in document.
~IF［ %合致している規則 ~EQ ε ］ ⇒ ~RET `遷移を飛ばす^i ◎ If matchingRule is not found, then return "skip transition".
~IF［ %合致している規則の `navigation$d 記述子の`算出d値$ ~EQ `none$vN ］ ⇒ ~RET `遷移を飛ばす^i ◎ If matchingRule’s navigation descriptor’s computed value is none, then return "skip transition".
~Assert： %合致している規則の `navigation$d 記述子の`算出d値$ ~EQ `auto$vN ◎ Assert: matchingRule’s navigation descriptor’s computed value is auto.
%型~群~記述子 ~LET %合致している規則の `types$d 記述子の`算出d値$ ◎ Let typesDescriptor be matchingRule’s types descriptor.
~IF［ %型~群~記述子 ~EQ `none^v ］ ⇒ ~RET 新たな`有順序~集合$ ◎ If typesDescriptor’s computed value is none, then return a set « ».
~RET %型~群~記述子を成す文字列たちが成す`有順序~集合$ ◎ Return a set of strings corresponding to typesDescriptor’s computed value.

【集合なので、重複する文字列たちは，一つ（おそらく，最初のそれ）だけ残して他は除去されることになる。】

8.4. 旧-文書~内で~view遷移を設定しておく

8.4.1. 外へ出る非同一-文書な~view遷移の適格~性を検査する

`~naviは非同一-文書な~view遷移を誘発し得るか？@ 検査するときは、所与の ⇒＃ `文書$ %旧-文書, `文書$ %新-文書, `NavigationType$I %~navi種別, 真偽値 %~browser~UIによる~naviか ◎終に対し： ◎ To check if a navigation can trigger a cross-document view-transition? given a Document oldDocument, a Document newDocument, a NavigationType navigationType, and a boolean isBrowserUINavigation:

注記：これは、 ~naviの間に［ ~callされる／`並列的$に~callされる］。 ◎ Note: this is called during navigation, potentially in parallel.

任意選択で ⇒ ~IF［ ~UAは`実装定義$な~navi体験を表示するものと裁定した（例： ~gestureに基づく後戻りする~navi用の遷移）］ ⇒ ~RET ~F （~UAは作者-定義な~view遷移を無視してもヨイ。） ◎ If the user agent decides to display an implementation-defined navigation experience, e.g. a gesture-based transition for a back navigation, the user agent may ignore the author-defined view transition. If that is the case, return false.
~IF［ %旧-文書の`外へ出る~view遷移を起動できるか$doc ~EQ ~F ］ ⇒ ~RET ~F ◎ If oldDocument’s can initiate outbound view transition is false, then return false.
~IF［ %~navi種別 ~EQ `reload$l ］ ⇒ ~RET ~F ◎ If navigationType is reload, then return false.
~IF［ ( %旧-文書の`生成元$doc, %新-文書の`生成元$doc ) は`同一-生成元$でない］ ⇒ ~RET ~F ◎ If oldDocument’s origin is not same origin as newDocument’s origin, then return false.
~IF［ %新-文書の`非同一-生成元~redirectを介して作成されたか$doc ~EQ ~T ］~AND［ %新-文書の`最近の~entry$ ~EQ ~NULL ］ ⇒ ~RET ~F ◎ If newDocument was created via cross-origin redirects and newDocument’s latest entry is null, then return false.

注記： `最近の~entry$は、 %新-文書が［ `~BF~cache$から復旧されたものではなく，新たな~naviによるものである場合］には ~NULL になる。 ◎ Note: A Document's latest entry would be null if this is a new navigation, rather than a restore from BFCache.
~IF［ %~navi種別 ~EQ `traverse$l ］ ⇒ ~RET ~T ◎ If navigationType is traverse, then return true.
~IF［ %~browser~UIによる~naviか ~EQ ~T ］ ⇒ ~RET ~F ◎ If isBrowserUINavigation is true, then return false.
~RET ~T ◎ Return true.

8.4.2. ~pageが切替わるに準備済みなとき外へ出る遷移を設定しておく

`非同一-文書な~view遷移を設定しておく@ ときは、所与の ⇒＃ `文書$ %旧-文書, `文書$ %新-文書, ~algo %~naviで続行する手続き ◎終に対し： ◎ To setup cross-document view-transition given a Document oldDocument, a Document newDocument, and proceedWithNavigation, which is an algorithm accepting nothing:

注記：これは、 ~HTML仕様から~callされる。 ◎ Note: This is called from the HTML spec.

~Assert：この手続きは、 %旧-文書に対し~queueされた`~task$を成す一部として走っている。 ◎ Assert: These steps are running as part of a task queued on oldDocument.
~IF［ %旧-文書の`外へ出る~view遷移を起動できるか$doc ~EQ ~F ］ ⇒ ~RET ~NULL ◎ If oldDocument’s can initiate outbound view transition is false, then return null.
%規則からの遷移~型~群 ~LET `~view遷移~規則を解決する$( %旧-文書 ) ◎ Let transitionTypesFromRule be the result of resolving the @view-transition rule for oldDocument.
~Assert： %規則からの遷移~型~群 ~NEQ `遷移を飛ばす^i ◎ Assert: transitionTypesFromRule is not "skip transition".

注記： %新-文書は，構文解析-済みでないかもしれないので、それが~opt-inされたかどうかは，まだ知れない。 %新-文書用に~opt-inを検査するのは、 `pagereveal$et ~eventが発火されたときになる。 ◎ Note: We don’t know yet if newDocument has opted in, as it might not be parsed yet. We check the opt-in for newDocument when we fire the pagereveal event.
~IF［ %旧-文書にて`作動中な~view遷移$doc ~NEQ~NULL ］ ⇒ `~view遷移を飛ばす$( %旧-文書にて`作動中な~view遷移$doc, %旧-文書に`関連な~realm$に属する `AbortError$E 例外 ) ◎ If oldDocument’s active view transition is not null, then skip oldDocument’s active view transition with an "AbortError" DOMException in oldDocument’s relevant Realm.

注記：これは、当の文書が~unloadするに準備済みなときは，走っている遷移を飛ばすことを意味する。 ◎ Note: this means that any running transition would be skipped when the document is ready to unload.
%外へ出る遷移 ~LET %旧-文書に`関連な~realm$に属する新たな `ViewTransition$I ~obj ◎ Let outboundTransition be a new ViewTransition object in oldDocument’s relevant Realm.
%外へ出る遷移にて`作動中な型~群$vT ~SET %規則からの遷移~型~群 ◎ Set outboundTransition’s active types to transitionTypesFromRule.

注記： `作動中な型~群$vTは、文書~間では共有されない。新-文書【 %旧-文書？】内の `types$m を操作しても， %新-文書内の型たちには影響しない — それは、 %新-文書が`露呈され$たなら， `types$d 記述子から読取られることになる。 ◎ Note: the active types are not shared between documents. Manipulating the types in the new document does not affect the types in newDocument, which would be read from the types descriptor once newDocument is revealed.

注記： %外へ出る遷移【！the ViewTransition】は、 %旧-文書が非可視になったなら飛ばされる。 ◎ Note: the ViewTransition is skipped once the old document is hidden.
%外へ出る遷移の`外へ出る捕捉-後の手続き$vT ~SET 所与の ( ［ `~view遷移~params$／ ~NULL ］ %~params ) に対し，次を遂行する手続き： ◎ Set outboundTransition’s outbound post-capture steps to the following steps given a view transition params-or-null params:
1. %新-文書の`内へ来る~view遷移~params$doc ~SET %~params ◎ Set newDocument’s inbound view transition params to params.
  
  注記：内へ来る遷移は、 `pagereveal$et ~eventを配送した後に作動化される — この~event【用の~handler】において為された変異が捕捉された新-状態に適用されることを確保するため。 ◎ Note: The inbound transition is activated after the dispatch of pagereveal to ensure mutations made in this event apply to the captured new state.
2. 任意選択で，次の手続きを`並列的$に遂行する — これは、時間切れになったとき，当の遷移を飛ばすようにする： ◎ To skip the transition after a timeout, the user agent may perform the following steps in parallel:
  1. `実装定義$な`所要時間$を経るまで待機する ◎ Wait for an implementation-defined duration.
  2. `大域~taskを~queueする$( `~DOM操作~task~source$, %新-文書に`関連な大域~obj$, 次の手続き ) ◎ Queue a global task on the DOM manipulation task source given newDocument’s relevant global object to perform the following step:
    
    手続きは ⇒ ~IF［ %新-文書の`内へ来る~view遷移~params$doc ~EQ %~params ］ ⇒ %新-文書の`内へ来る~view遷移~params$doc ~SET ~NULL ◎ • If newDocument’s inbound view transition params is params, then set newDocument’s inbound view transition params to null.
3. %~naviで続行する手続き() ◎ Call proceedWithNavigation.
%旧-文書にて`作動中な~view遷移$doc ~SET %外へ出る遷移 ◎ Set oldDocument’s active view transition to outboundTransition.

注記：以降の処理nは、 `処理待ち遷移~演算を遂行する$中で継続される。 ◎ Note: The process continues in perform pending transition operations.
~RET %外へ出る遷移 ◎ ↓

~UAは、【上の手続きを遂行したなら，】直前に表示していた~frameを次に挙げるいずれか【早い方】までは表示するベキである： ◎ The user agent should display the currently displayed frame until either:

%新-文書に向けて `pagereveal$et ~eventが発火される時点 ◎ The pagereveal event is fired.
%新-文書にて`作動中な~view遷移$docの`相$vT ~EQ `済み$i になった時点 ◎ its active view transition's phase is "done".

注記：これは、［旧-状態を表示してから新-状態を表示するまでの間、意図されない明滅は生じない］ことを確保して，遷移を滑らかに保つためである。 ◎ Note: this is to ensure that there are no unintended flashes between displaying the old and new state, to keep the transition smooth. ◎ Return outboundTransition.

8.4.3. 現在の状態を反映するよう~opt-in~flagを更新する

`外へ出る遷移~用の~opt-in状態を更新する@ ときは、所与の ( `文書$ %文書 ) に対し： ◎ To update the opt-in state for outbound transitions for a Document document:

%文書の`外へ出る~view遷移を起動できるか$doc ~SET ~IS ~AND↓：
- %文書の`露呈されたか$doc ~EQ ~T
- `~view遷移~規則を解決する$( %文書 ) ~NEQ `遷移を飛ばす^i
◎ If document has been revealed, and the result of resolving the @view-transition rule is not "skip transition", then set document’s can initiate outbound view transition to true. ◎ Otherwise, set document’s can initiate outbound view transition to false.

8.4.4. ~view遷移が飛ばされた場合に~naviと伴に続行する

`~level 1$ の`~view遷移を飛ばす$ ~algoの末尾には、所与の ( `ViewTransition$I %遷移 ) に対し，次を遂行する段を挿入する： ◎ Append the following steps to skip the view transition given a ViewTransition transition:

~IF［ %遷移の`外へ出る捕捉-後の手続き$vT ~NEQ ~NULL ］ ⇒ %遷移の`外へ出る捕捉-後の手続き$vT( ~NULL ) ◎ If transition’s outbound post-capture steps is not null, then run transition’s outbound post-capture steps with null.

注記：これは、 ~monkey~patch方式で書かれており， `~level 1$ 仕様が熟したときには，その~algoの中へ併合されることになる。 ◎ Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.

8.4.5. 旧-状態を捕捉した後に非同一-文書な~view遷移と伴に続行する

`~level 1$ の`処理待ち遷移~演算を遂行する$ ~algoの先頭には、所与の ( `文書$ %文書 ) に対し，次を遂行する段たちを挿入する： ◎ Prepend the following step to the Perform pending transition operations algorithm given a Document document:

%~view遷移 ~LET %文書にて`作動中な~view遷移$doc ◎ ↓
~IF［ %~view遷移 ~NEQ ~NULL ］~AND［ %~view遷移の`外へ出る捕捉-後の手続き$vT ~NEQ ~NULL ］： ◎ If document’s active view transition is not null and its outbound post-capture steps is not null, then:
1. ~Assert： %~view遷移の`相$vT ~EQ `捕捉-待ち$i ◎ Assert: document’s active view transition's phase is "pending-capture".
2. %~view遷移~params ~LET ~NULL ◎ Let viewTransitionParams be null;
3. %文書の`~view遷移~用の描画を抑止するか$doc ~SET ~T ◎ Set document’s rendering suppression for view transitions to true.
4. %結果 ~LET `旧-状態を捕捉する$( %遷移 )
  
  ここでは，同期的に`旧-状態を捕捉する$が、 ~~本当は，非同期的に行われる — 要素を画像の中へ描画することは同期的には行い得ないので。これは、 `~level 1$ 仕様にて，もっと明示的に指定されるべきである。
  ◎ Though capture the old state appears here as a synchronous step, it is in fact an asynchronous step as rendering an element into an image cannot be done synchronously. This should be more explicit in the L1 spec. ◎ Capture the old state for transition.
5. ~IF［ %結果 ~EQ `成功^i ］ ⇒ %~view遷移~params ~SET 新たな`~view遷移~params$ — その ⇒＃ `有名~要素$vTP ~SET %遷移の`有名~要素~群$vTを`~cloneする$map, `初期~snapshot包含塊~size$vTP ~SET %遷移の`初期~snapshot包含塊~size$vT ◎ If this succeeded, then set viewTransitionParams to a new view transition params whose named elements is a clone of transition’s named elements, and whose initial snapshot containing block size is transition’s initial snapshot containing block size.
6. %文書の`~view遷移~用の描画を抑止するか$doc ~SET ~F ◎ Set document’s rendering suppression for view transitions to false.
7. `外へ出る捕捉-後の手続き$vT( %~view遷移~params ) ◎ Call transition’s outbound post-capture steps given viewTransitionParams.

8.5. 新-文書における~view遷移の作動化-法

`内へ来る非同一-文書な~view遷移を解決する@ ときは、所与の ( `文書$ %文書 ) に対し： ◎ To resolve inbound cross-document view-transition for Document document:

~Assert： %文書は`全部的に作動中$である。 ◎ Assert: document is fully active.
~Assert： %文書の`露呈されたか$doc ~EQ ~T ◎ Assert: document has been revealed is true.
`外へ出る遷移~用の~opt-in状態を更新する$( %文書 ) ◎ Update the opt-in state for outbound transitions for document.
%内へ来る~view遷移~params ~LET %文書の`内へ来る~view遷移~params$doc ◎ Let inboundViewTransitionParams be document’s inbound view transition params.
~IF［ %内へ来る~view遷移~params ~EQ ~NULL ］ ⇒ ~RET ~NULL ◎ If inboundViewTransitionParams is null, then return null.
%文書の`内へ来る~view遷移~params$doc ~SET ~NULL ◎ Set document’s inbound view transition params to null.
~IF［ %文書にて`作動中な~view遷移$doc ~NEQ ~NULL ］ ⇒ ~RET ~NULL ◎ If document’s active view transition is not null, then return null.

注記：これは、［非同一-文書な遷移が処理待ちにある下で，当の文書が露呈される前に同一-文書な遷移が開始された］ときは，前者の遷移を取消すようにすることを意味する。 ◎ Note: this means that starting a same-document transition before revealing the document would cancel a pending cross-document transition.
%解決-済み規則 ~LET `~view遷移~規則を解決する$( %文書 ) ◎ Resolve @view-transition rule for document and let resolvedRule be the result.
~IF［ %解決-済み規則 ~EQ `遷移を飛ばす^i ］ ⇒ ~RET ~NULL ◎ If resolvedRule is "skip transition", then return null.
%遷移 ~LET %文書に`関連な~realm$に属する新たな `ViewTransition$I — その ⇒＃ `有名~要素~群$vT ~SET %内へ来る~view遷移~params の`有名~要素$vTP, `初期~snapshot包含塊~size$vT ~SET %内へ来る~view遷移~params の`初期~snapshot包含塊~size$vTP ◎ Let transition be a new ViewTransition in document’s relevant Realm, whose named elements is inboundViewTransitionParams’s named elements, and initial snapshot containing block size is inboundViewTransitionParams’s initial snapshot containing block size.
%文書の`作動中な~view遷移$doc ~SET %遷移 ◎ Set document’s active view transition to transition.
`~promiseを解決する$( %遷移の`更新~callback済み時の~promise$vT ) ◎ Resolve transition’s update callback done promise with undefined.
%遷移の`相$vT ~SET `更新~callbackは~call済み$i ◎ Set transition’s phase to "update-callback-called".
%遷移にて`作動中な型~群$vT ~SET %解決-済み規則 ◎ Set transition’s active types to resolvedRule.
~RET %遷移 ◎ Return transition.

8.6. `view-transition-class$p の捕捉-法

`~level 1$ の［ `旧-状態を捕捉する$／ `新-状態を捕捉する$ ］~algoには、所与の ( `捕捉された要素$ %捕捉, `要素$ %要素 ) に対し，次を遂行する段を挿入する†： ◎ When capturing the old or new state for an element, perform the following steps given a captured element capture and an element element:

~IF［ %要素の `view-transition-class$p ~propには %要素の`~node文書$が結付けられる†† ］ ⇒ %捕捉の`~class~list$cE ~SET %要素の `view-transition-class$p の`算出d値$ ◎ Set capture’s class list to the computed value of element’s view-transition-class, if it is associated with element’s node document.

【† どこに挿入するか指定されていないが、 “… ~SET 新たな捕捉された要素” と記された段より後のどこかであろう。】【†† `~tree視野な名前$用の根として — すなわち， %要素の `view-transition-class^p ~propの`~cascaded値$を与えた宣言を包含する~stylesheetを~hostしている要素の`根$ ~EQ %要素の`~node文書$ 】

8.7. `view-transition-group$p の捕捉-法と適用-法

8.7.1. `view-transition-group$p 値の解決-法

`要素$【！`Element$I】 %要素用の `文書~視野な~view遷移~group@ を取得するときは、次の手続きを遂行する： ◎ To get the document-scoped view transition group of an Element element, perform the following steps:

%算出d~group ~LET %要素の `view-transition-group$p ~propの`算出d値$ ◎ Let computedGroup be the computed value of element’s view-transition-group property.
~IF［ %算出d~group は %要素の`~node文書$に結付けられている【~node文書に結付けられた`~tree視野な名前$である】］ ⇒ ~RET %算出d~group ◎ If computedGroup is associated with element’s node document, return computedGroup.
~RET `normal$v ◎ Return normal.

8.7.2. 包含ng~group名の解決-法

`要素$【！`Element$I】 %要素用の `最も近い包含ng~group名@ を解決するときは、所与の ( `ViewTransition$I %~view遷移 ) に対し，次の手続きを遂行する： ◎ To resolve the nearest containing group name of an Element element, perform the following steps given a ViewTransition viewTransition:

~Assert： %要素は %~view遷移に関与する。 ◎ Assert: element participates in viewTransition.
`平坦~tree$における %要素の ~EACH( `先祖$ %先祖 ) に対し， %要素に近いものから順に ⇒ ~IF［ %先祖は %~view遷移に関与する］~AND［ %先祖用の`文書~視野な~view遷移~group$ ~NEQ `normal$v ］ ⇒ ~RET %先祖用の`文書~視野な~view遷移~名$ ◎ Let ancestorGroup be element’s nearest flat tree ancestor who participates in viewTransition and whose document-scoped view transition group is not normal. ◎ If ancestorGroup exists, return ancestorGroup’s document-scoped view transition name.
~RET `none$v ◎ Return none.

8.7.3. ~group名の解決-法

`要素$【！`Element$I】 %要素用の `使用~group名@ 【 `view-transition-group$p の`使用~値$】を解決するときは、所与の ( `ViewTransition$I %遷移 ) に対し，次の手続きを遂行する： ◎ To resolve the used group name of an Element element, perform the following steps given a ViewTransition transition:

~Assert： %要素は %遷移に関与する。 ◎ Assert: element participates in transition.
%~group ~LET %要素用の`文書~視野な~view遷移~group$ ◎ Let group be element’s document-scoped view transition group.
%包含ng~group名 ~LET %要素用の`最も近い包含ng~group名$( %遷移 ) ◎ Let containingGroupName be element’s nearest containing group name given transition. ◎ ↓ Return the first matching statement, switching on group:
~IF［ %~group ~IN { `normal@v , `contain@v } ］ ⇒ ~RET %包含ng~group名 ◎ normal contain • containingGroupName.

注記：【`view-transition-group$p に】 `contain$v を伴う要素【の `view-transition-name$p 】は、その子孫~用の`最も近い包含ng~group名$になる。 ◎ • Note: an element with contain becomes the nearest containing group name for its descendants.
~ELIF［ %~group ~EQ `nearest@v ］：
1. `平坦~tree$における %要素の ~EACH( `先祖$ %先祖 ) に対し， %要素に近いものから順に ⇒ ~IF［ %先祖は %~view遷移に関与する］ ⇒ ~RET %先祖用の`文書~視野な~view遷移~名$
2. ~RET 【何を返すか指定されていない（ %包含ng~group名？）】
◎ nearest • The document-scoped view transition name of the element’s nearest flat tree ancestor which participates in the transition.
~ELSE（ %~group は `custom-ident$t である）：
1. `平坦~tree$における %要素の ~EACH( `先祖$ %先祖 ) に対し， %要素に近いものから順に ⇒ ~IF［ %先祖は %~view遷移に関与する］~AND［ %先祖用の`文書~視野な~view遷移~名$ ~EQ %~group ］ ⇒ ~RET %~group
2. ~RET %包含ng~group名
◎ <custom-ident> • group if the element has a flat tree ancestor whose document-scoped view transition name is group and participates in transition; Otherwise containingGroupName.

8.7.4. 旧- `view-transition-group$p を算出する

`~level 1$ の`旧-状態を捕捉する$ ~algoには、その［ %捕捉~要素~群を反復する段］の中に，次を遂行する段を挿入する： ◎ When capturing the old state for an element, perform the following steps given a captured element capturedElement, a ViewTransition transition, and an element element:

%捕捉の`包含ng~group名$cE ~SET %要素用の`使用~group名$( %遷移 ) ◎ Set capturedElement’s containing group name to element’s used group name given transition.

8.7.5. 新- `view-transition-group$p を算出する

`~level 1$ の`新-状態を捕捉する$ ~algoには、その［各 `要素$ %要素を反復する段］の中の最後に，次を遂行する段を挿入する： ◎ When capturing the new state for an element, perform the following steps given a captured element capturedElement a ViewTransition transition, and an element element:

%有名~要素~群[ %遷移~名 ] の`包含ng~group名$cE ~SET %要素用の`使用~group名$( %遷移 ) ◎ Set capturedElement’s containing group name to element’s used group name given transition.

8.7.6. `view-transition-group()$pe の親を指定された包含ng~groupに~~改める

`~level 1$ の`遷移~疑似要素たちを設定しておく$ ~algoに対しては，その中の［ %遷移の`有名~要素~群$vTを成す ~EACH( %遷移~名 → %捕捉された要素 ) を反復する段］ %反復~段に関して： ◎ When setting up the transition pseudo-element for a captured element capturedElement, given a transitionName and a transition:

%反復~段の前に，次を遂行する段たちを挿入する：
1. %~group~map ~LET 新たな`有順序~map$
2. %遷移の`有名~要素~群$vTの`~key群$mapを成す ~EACH( %遷移~名 ) に対し ⇒ %~group~map[ %遷移~名 ] ~SET 新たな `view-transition-group()$pe — その ⇒＃ `~view遷移~名$ ~SET %遷移~名
【これらの段は、この訳による補完。原文は，次項にて %親~group に設定するものをそれが作成される前に利用しているので、ここで予め作成しておく。】
◎ ↓
%反復~段の中の［ %~group を新たな `view-transition-group()$pe で初期化する段］に代えて，次を遂行する：
1. %~group ~LET %~group~map[ %遷移~名 ]
2. %包含ng~group名 ~LET %捕捉された要素の`包含ng~group名$cE
3. ~IF［ %包含ng~group名 ~NEQ ~NULL ］：
  1. %親~group ~LET %~group~map[ %包含ng~group名 ]
  2. %親~group に【その子として】 %~group を付加する
◎ Let containingGroupName be capturedElement’s containing group name. ◎ If containingGroupName is not null, then: • Let groupContainerElement be transition’s named elements[containingGroupName]. • Let group be the ::view-transition-group(), whose view transition name is set to transitionName. • Let parentGroup be the ::view-transition-group(), whose view transition name is set to containingGroupName. • Append group to parentGroup.
%反復~段の中の %変形を初期化する段（ `keyframes^at 規則の構築に関与する段）の直後に，次を遂行する段を挿入する ⇒ %変形に［ %遷移の`有名~要素~群$vT[ %包含ng~group名 ] の`旧-変形$cE ］の逆-行列を`乗算する$ 【左, 右どちらから乗算するか指定されていない。】 ◎ • When setting the animation keyframes given transform, multiply transform by the inverse matrix of groupContainerElement’s old transform.

注記：旧-~groupと新-~groupが `mismatch^en なとき，これがどう解決されるかは、まだこれから。 `10631$issue を見よ。 ◎ Note: It is TBD how this is resolved when the old and new groups mismatch. See Issue 10631.

8.7.7. ~groupの `transform$p をそれを包含している `view-transition-group()$pe に相対的に調整する

`~level 1$ の`疑似要素~styleを更新する$ ~algoには、 %捕捉された要素用の`~group~style規則$cEを設定する段］の前に，次を遂行する段を追加する：

%~group名 ~LET %捕捉された要素の`包含ng~group名$cE
~IF［ %~group名 ~NEQ ~NULL ］ ⇒ %変形に［ %遷移の`有名~要素~群$vT[ %~group名 ] の`~snapshot包含塊からの変形$cE ］の逆-行列を`乗算する$ 【左, 右どちらから乗算するか指定されていない。】
%捕捉された要素の`~snapshot包含塊からの変形$cE ~SET %変形

◎ When updating the style of the transition pseudo-element, perform the following steps before setting the group styles rule, given a captured element capturedElement, a transform, and a ViewTransition transition: • Set capturedElement’s transform from snapshot containing block to transform. • If capturedElement’s containing group name is not null, then: • Let groupContainerElement be transition’s named elements[capturedElement’s containing group name]. • Multiply transform by the inverse matrix of groupContainerElement’s transform from snapshot containing block.

~privacyの考慮点

この仕様が導入する新たな~privacy考慮点は無い。 ◎ This specification introduces no new privacy considerations.

~securityの考慮点

非同一-生成元の課題を防止するため，現時点では、非同一-文書な~view遷移が可能化され得るのは，同一-生成元な~naviに限られる。それでも、 `WICG/view-transitions 課題 #200＠https://github.com/WICG/view-transitions/issues/200$ にて論じられたとおり，次に挙げる潜在的な脅威がある： ◎ To prevent cross-origin issues, at this point cross-document view transitions can only be enabled for same-origin navigations. As discussed in WICG/view-transitions#200, this still presents two potential threats:

新-文書, 旧-文書における`非同一-生成元~能力は隔離されるか？$enVは、異なるかもしれない。これは、［この~flagが~T をとる文書］が［この~flagが ~F をとる文書］から文書から画像~dataを読取れるような状況を生じさせ得る。これは、 `~level 1$ `§ ~securityの考慮点＠~CSSVT#sec$ にてすでに軽減-済みである — 同じ制約は、捕捉された非同一-生成元な `iframe$e 用に適用されるので。 ◎ The cross-origin isolated capability in both documents might be different. This can cause a situation where a Document that is cross-origin isolated can read image data from a document that is not cross-origin isolated. This is already mitigated in [[css-view-transitions-1#sec], as the same restriction applies for captured cross-origin iframes.
同一-生成元な~naviは、依然として非同一-生成元な~redirectを介して生じるかもしれない例： `https://example.com^c に在る~pageが `https://auth-provider.com/^c に在る~pageへ~linkしていて，それが `https://example.com/loggedin^c へ戻るよう~redirectする場合。 ◎ A same-origin navigation might still occur via a cross-origin redirect, e.g. https://example.com links to https://auth-provider.com/ which redirects back to https://example.com/loggedin.

これは、非同一-生成元な主体が［利用者を期待されない当事者-主体~URLへ~redirectする］一方で［期待されない遷移を生じさせる］ことにより， ~redirectが在った事実【非同一-生成元な文書が介入した事実】をぼやかす（軽微な）状況を生じさせ得る。これを軽減するため、現時点では［ `文書$の`非同一-生成元~redirectを介して作成されたか$doc ~EQ ~T ］の場合には，~navi用の~view遷移は不能化される。この検査は、当の`文書$が`作動化し直され$ているときは，適用されないことに注意 — その事例では、非同一-生成元な~redirectがすでにその場を占めているので。 ◎ This can cause a (minor) situation where the cross-origin party would redirect the user to an unexpected first-party URL, causing an unexpected transition and obfuscating that fact that there was a redirect. To mitigate this, currently view transitions are disabled for navigations if the Document was created via cross-origin redirects. Note that this check doesn’t apply when the Document is being reactivated, as in that case the cross-origin redirect has already taken place.

注記：これが適用されるのは、 ~server側による~redirectに限られる。 ~client側による~redirect — 例： <`meta＠~HEmetadata#the-meta-element$ `http-equiv＠~HEmetadata#attr-meta-http-equiv$=`refresh＠~HEmetadata#attr-meta-http-equiv-keyword-refresh$> を利用するなどによる — は、新たな~naviと等価になる。 ◎ Note: this only applies to server-side redirects. A client-side redirect, e.g. using [^meta/http-equiv/refresh^], is equivalent to a new navigation.
この特能は、 ~CSSにより多く情報を公開する — これまでの~CSSは、 ~naviに関係するものを何も自覚しなかったので。これは、第三者-主体に属する~CSSの安全性に関わる懸念を提起し得る。しかしながら，一般~規則として、第三者-主体に属する~stylesheetは，まずは信用される~sourceから来るベキである — ~CSSは、［文書について `learn^en 【？】し得る／多くの仕方で文書【の呈示】を変更し得る］ので。 ◎ This feature exposes more information to CSS, as so far CSS was not aware of anything navigation-related. This can raise concerns around safety 3rd-party CSS. However, as a general rule, 3rd-party stylesheets should come from trusted sources to begin with, as CSS can learn about the document or change it in many ways.

詳細な論点は、 `8684$issue, `WICG/view-transitions 課題 #200＠https://github.com/WICG/view-transitions/issues/200$ を見よ。 ◎ See Issue #8684 and WICG/view-transitions#200 for detailed discussion.

変更点

◎非規範的

`2024年 05月 16日作業草案＠~TR/2024/WD-css-view-transitions-2-20240516/$ からの変更点 ◎ Changes from 2024-05-16 Working Draft: 層~化~捕捉（ `layered capture^en ）の初期~仕様。【今や除去された。】（ `10585$issue ） ◎ First pass at layered capture (#10585); ［非同一-生成元~redirectを利用して作成された文書］の中へ辿るときの遷移を許容した。（ `11063$issue ） ◎ Allow transitions when traversing into a document that was created using cross-origin redirects (#11063#11063); 入子ngに関する少数の詳細を明確化した。（ `10780$issue, `10633$issue ） ◎ Clarify a few nesting details (#10780 and #10633); `view-transition-name$p 用の値として~keyword `auto$v を許容した。（ `8320$issue ） ◎ Allow auto as a keyword for view-transition-name (#8320); 内へ来る~view遷移~用の時間切れの挙動を明確化した。（ `10800$issue ） ◎ Clarify timeout behavior for inbound view transition (#10800); 内へ来る非同一-文書な~view遷移は、当の文書が非可視【 `可視性~状態$doc ~EQ `hidden^l 】なときは，飛ばされるべきであるとした。（ `9822$issue ） ◎ When hiding the document, and inbound cross-document view transition should be skipped. (#9822); `UpdateCallback^I をもっと特有な何か【 `ViewTransitionUpdateCallback$I 】に改称した。 ◎ Rename UpdateCallback to something more specific.; `CSSViewTransitionRule$I 【の `navigation$m 取得子】は、 `navigation$d 記述子が［妥当でない／欠落な］場合には，空~文字列を返すことを明確化した。（ `10654$issue ） ◎ Clarify that CSSViewTransitionRule returns an empty string for invalid/missing navigation descriptor (#10654); 入子な~view遷移~用の初期~仕様（ `10334$issue ） ◎ Initial spec for nested view transitions (#10334); `view-transition-class$p 【の `none^v 以外の値】は`~tree視野な名前$になるものとした。（ `10529$issue ） ◎ view-transition-class is a tree-scoped name (#10529); `CSSRule$I を廃用な~patternで拡張することをやめた。（ `10606$issue ） ◎ Stop extending CSSRule with obsolete pattern (See #10606)

1. 序論

2. 非同一-文書な~view遷移

2.1. 概観

2.1.1. 作動化

2.1.2. 新-状態が安定~化するまでの待機-法

2.1.3. ~custom化

2.1.3.1. 旧-文書における~view遷移の取扱い

2.1.3.2. 新-文書における~view遷移の取扱い

2.1.4. ~lifecycle

2.2. 例

2.3. 非同一-文書な~view遷移の~opt-in法

2.3.1. `view-transition^at 規則

2.3.2. `navigation^d 記述子

2.3.3. ~CSSOMによる `view-transition$at 規則への~access法

3. 選択的な~view遷移

3.1. 概観

3.2. 例

3.3. 作動中な~view遷移に基づく選定-法

3.3.1. `active-view-transition^ps 疑似類

3.3.2. `active-view-transition-type()^ps 疑似類

3.4. 進行中な~view遷移の型~群の変更-法

3.5. 非同一-文書な~view遷移~用の遷移~型の作動化-法： `types^d 記述子

4. ~view遷移~疑似要素たちの~styleの共有-法

4.1. 概観

4.2. 例

4.3. `view-transition-class^p ~prop

4.4. 有名~view遷移~疑似要素に対する追加

5. `document.startViewTransition()^m の拡張-法

6. `view-transition-name$p 自動的な決定-法

6.1. 概観

6.2. 例

6.3. `view-transition-name^p に対する追加

7. 入子な~view遷移

7.1. 概観

7.2. 例

7.3. `view-transition-group^p ~prop

8. ~algo

8.1. ~data構造

8.1.1. 文書に対する追加

8.1.2. `ViewTransition^I に対する追加

8.1.3. 直列化-可能な~view遷移~params

8.2. ~view遷移の~page可視性~変化-時の手続きに対する追加

8.2.1. 捕捉された要素に対する拡張

8.3. `view-transition$at 規則の解決-法

8.4. 旧-文書~内で~view遷移を設定しておく

8.4.1. 外へ出る非同一-文書な~view遷移の適格~性を検査する

8.4.2. ~pageが切替わるに準備済みなとき外へ出る遷移を設定しておく

8.4.3. 現在の状態を反映するよう~opt-in~flagを更新する

8.4.4. ~view遷移が飛ばされた場合に~naviと伴に続行する

8.4.5. 旧-状態を捕捉した後に非同一-文書な~view遷移と伴に続行する

8.5. 新-文書における~view遷移の作動化-法

8.6. `view-transition-class$p の捕捉-法

8.7. `view-transition-group$p の捕捉-法と適用-法

8.7.1. `view-transition-group$p 値の解決-法

8.7.2. 包含ng~group名の解決-法

8.7.3. ~group名の解決-法

8.7.4. 旧- `view-transition-group$p を算出する

8.7.5. 新- `view-transition-group$p を算出する

8.7.6. `view-transition-group()$pe の親を指定された包含ng~groupに~~改める

8.7.7. ~groupの `transform$p を それを包含している `view-transition-group()$pe に相対的に調整する

~privacyの考慮点

~securityの考慮点

変更点

8.7.7. ~groupの `transform$p をそれを包含している `view-transition-group()$pe に相対的に調整する