CSS ビュー遷移 — CSS View Transitions Module Level 2

1.1. ~level 2 による更新

~level 2 は、 `CSS-VIEW-TRANSITIONS-1$r における~modelを拡張して， 次に挙げるものを定義する： ◎ Level 2 defines the following, extending the model in [CSS-VIEW-TRANSITIONS-1]:

• `§ 非同一-文書な~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

1.2. ~DOM更新と視覚的な遷移の分離-法

伝統的に， 2 つの文書~状態の間で視覚的な遷移を作成することには、 ~DOMにおいて両~状態が同時に在るような期間が要求されていた。 事実，それは、 通例的には，両~状態を表現し得る特有な~DOM構造を作成することを孕んでいた。 例えば，ある要素が容器から容器へ “移動する” 場合、 要素は，当の遷移を成す期間において［ どちらかの容器 または それらの先祖~要素【の限界域】で切取られるのを避ける ］ため［ 両~容器の外側に存在する必要がある ］ことが多い。 ◎ Traditionally, creating a visual transition between two document states required a period where both states were present in the DOM at the same time. In fact, it usually involved creating a specific DOM structure that could represent both states. For example, if one element was “moving” between containers, that element often needed to exist outside of either container for the period of the transition, to avoid clipping from either container or their ancestor elements.

この余分な途中-状態は、 利用者~体験と~accessibilityの課題になることが多い — ~DOMを成す構造が，純粋に視覚的な効果~用に譲歩させられるので。 ◎ This extra in-between state often resulted in UX and accessibility issues, as the structure of the DOM was compromised for a purely-visual effect.

`~view遷移$は、 次を許容することにより，この厄介な途中-状態を避ける： ~DOMを 2 つの状態の間で瞬時に切替えてから、 別の層において 2 つの状態の間で［ 旧-状態を成す静的な視覚的な捕捉, 新-状態を成す~liveな捕捉 ］を利用して，~custom化~可能な視覚的な遷移を遂行することにより。 これらの捕捉は、 `疑似要素$たちが成す~treeとして表現される （詳細は、 `§ ~view遷移~用の疑似要素＠#view-transition-pseudos$にて） — それは、［ 旧-, 新- ］両~視覚的な状態が共存するようにして，［ ~size, 位置 ］を旧-から新-へ~animateしている間に［ ~cross-fadeするなどの効果 ］を許容する。 ◎ View Transitions avoid this troublesome in-between state by allowing the DOM to switch between states instantaneously, then performing a customizable visual transition between the two states in another layer, using a static visual capture of the old state, and a live capture of the new state. These captures are represented as a tree of pseudo-elements (detailed in § 3.2 View Transition Pseudo-elements), where the old visual state co-exists with the new state, allowing effects such as cross-fading while animating from the old to new size and position.

1.3. ~view遷移の~custom化

`Document$I の `startViewTransition()$m は、 既定では，~page全般な`~view遷移$を作成する — それは、 2 つの~DOM状態の間で~cross-fadeすることからなる。 開発者は、 `view-transition-name$p ~CSS~propを利用して， どの要素が独立に捕捉されるかも選べる — それは、 要素が~pageを成す残りとは独立に~animateされることを許容する。 遷移-中な状態 （そこでは、旧-, 新- 両~視覚的な捕捉が存在する） は，疑似要素たちとして表現されるので、 開発者は，馴染みな特能 — `~CSS~animation＠~CSSANIM$cite, `~Web~animation＠~WANIM$cite など — を利用して各~遷移を~custom化できる。 ◎ By default, document.startViewTransition() creates a view transition consisting of a page-wide cross-fade between the two DOM states. Developers can also choose which elements are captured independently using the view-transition-name CSS property, allowing these to be animated independently of the rest of the page. Since the transitional state (where both old and new visual captures exist) is represented as pseudo-elements, developers can customize each transition using familiar features such as CSS Animations and Web Animations.

1.4. ~view遷移の~lifecycle

成功裡な`~view遷移$は、 順に，次に挙げる相を経ていく： ◎ A successful view transition goes through the following phases:

1. 開発者は、 document.`startViewTransition()$m を~callする — それは、 ある `ViewTransition$I %~view遷移 を返す。 ◎ Developer calls document.startViewTransition(updateCallback), which returns a ViewTransition, viewTransition.
2. 文書の現在の状態が “旧-” 状態として捕捉される。 ◎ Current state captured as the “old” state.
3. 描画は静止される。 ◎ Rendering paused.
4. `startViewTransition()$m の引数に `更新~callback$V が供されたならば，それが~callされる — それが，文書~状態を更新する。 ◎ Developer’s updateCallback function, if provided, is called, which updates the document state.
5. %~view遷移 の `updateCallbackDone$m が充足される。 ◎ viewTransition.updateCallbackDone fulfills.
6. 現在の状態が “新-” 状態 として捕捉される。 ◎ Current state captured as the “new” state.
7. 遷移~疑似要素たちが作成される。 これらが成す構造の概観は、 `§ ~view遷移~用の疑似要素＠#view-transition-pseudos$ を見よ。 ◎ Transition pseudo-elements created. See § 3.2 View Transition Pseudo-elements for an overview of this structure.
8. 描画は静止されなくなり，遷移~疑似要素が露呈される。 ◎ Rendering unpaused, revealing the transition pseudo-elements.
9. %~view遷移 の `ready$m が充足される。 ◎ viewTransition.ready fulfills.
10. 完遂するまで，疑似要素たちを~animateする。 ◎ Pseudo-elements animate until finished.
11. 遷移~疑似要素たちが除去される。 ◎ Transition pseudo-elements removed.
12. %~view遷移 の `finished$m が充足される。 ◎ viewTransition.finished fulfills.

1.5. 増補としての遷移

`~view遷移^cite ~APIの設計においては、［ ~animateされる遷移は、 下層の文書~状態~変化に対する視覚的な`増補^emである ］ことが要点を成す。 すなわち、 誤った環境設定や機器~拘束などに因り［ 視覚的な遷移を作成することに失敗して、 遷移~animationは起こり得ないことが事前に判明した場合 ］でも，開発者の `更新~callback$V【！ViewTransitionUpdateCallback】 は常に~callされる。 ◎ A key part of the View Transition API design is that an animated transition is a visual enhancement to an underlying document state change. That means a failure to create a visual transition, which can happen due to misconfiguration or device constraints, will not prevent the developer’s ViewTransitionUpdateCallback being called, even if it’s known in advance that the transition animations cannot happen.

例えば，開発者が`~view遷移~lifecycle＠#lifecycle$の開始~時に `skipTransition()$m を~callした場合、 ~animateされる遷移に関係している段 — `~view遷移~tree$を作成するなど — は起こらなくなる。 しかしながら， `更新~callback$V 【！ViewTransitionUpdateCallback】 は依然として~callされる — 飛ばされるのは、 下層の状態~変更ではなく，視覚的な遷移に限られる。 ◎ For example, if the developer calls skipTransition() at the start of the view transition lifecycle, the steps relating to the animated transition, such as creating the view transition tree, will not happen. However, the ViewTransitionUpdateCallback will still be called. It’s only the visual transition that’s skipped, not the underlying state change.

注記： ~DOM変更も飛ばされるべきである場合、 別の特能により取扱われる必要がある。 `NavigateEvent$I の `signal$m は、 そのような特能の開発者が これを取扱うためにも利用できる例である。 ◎ Note: If the DOM change should also be skipped, then that needs to be handled by another feature. navigateEvent.signal is an example of a feature developers could use to handle this.

`~view遷移^cite ~APIは、［ `更新~callback$V を介して，~DOMを非同期的に変更する ］ことを許容するが，~DOM変更を［ 遷移~自身に必要な~schedule法 ］を超えて［ ~queueする／~scheduleする ］ことは担当しない。 非同期的な~DOM変更には、 同時並行に起こり得るものもあれば （例：それらが独立な~componentの中で起きている場合），［ 他を~queueする／先立つ変更を中止する ］必要があるものもある。 これは、 当の~appを より全体的に捉える［ 特能／~framework ］に委ねるのが最善である。 ◎ Although the View Transition API allows DOM changes to be asynchronous via the ViewTransitionUpdateCallback, the API is not responsible for queuing or otherwise scheduling DOM changes beyond any scheduling needed for the transition itself. Some asynchronous DOM changes can happen concurrently (e.g if they’re happening within independent components), whereas others need to queue, or abort an earlier change. This is best left to a feature or framework that has a more holistic view of the application.

1.6. 描画~model

`~view遷移^cite ~APIは、 ~UAが生成した疑似要素を利用して， 所与の要素が描画される状態を【画像として】再現することにより働く。 ［ 要素, その子孫 ］に適用される［ 要素の描画を成す側面 ］ — 例えば［ `filter$p や `opacity$p 様な視覚的な効果／ `overflow$p や `clip-path$p による切取り ］ — は、 その`画像を捕捉する$中で画像を生成するときに適用される。 ◎ View Transition works by replicating an element’s rendered state using UA generated pseudo-elements. Aspects of the element’s rendering which apply to the element itself or its descendants, for example visual effects like filter or opacity and clipping from overflow or clip-path, are applied when generating its image in Capture the image.

しかしながら，そのように生成される画像には、 `mix-blend-mode$p の様な［ 要素が埋込まれたとき，それをどう描くかを定義する~prop ］は適用できない。 そのような~propは、 当の要素に対応している `view-transition-group()$pe 疑似要素 — 当の要素に等価な~boxを生成するよう意味された疑似要素 — に適用される。 ◎ However, properties like mix-blend-mode which define how the element draws when it is embedded can’t be applied to its image. Such properties are applied to the element’s corresponding ::view-transition-group() pseudo-element, which is meant to generate a box equivalent to the element.

`view-transition-group()$pe に対応している要素が “新-” 状態~内に在る場合、 ~browserは、 “新-” 状態~内にある~DOM要素との同期cを保つよう， 各~propを `view-transition-group()^pe へ複製する。 `view-transition-group()^pe に対応している要素が “旧-”, “新-” 両~状態~内に在って， 複製された~propは補間-可能な場合、 ~browserは，［ 当の~propを滑らかに~animateするための既定の~animation ］も設定しておくことになる。 ◎ If the ::view-transition-group() has a corresponding element in the "new" states, the browser keeps the properties copied over to the ::view-transition-group() in sync with the DOM element in the "new" state. If the ::view-transition-group() has corresponding elements both in the "old" and "new" state, and the property being copied is interpolatable, the browser also sets up a default animation to animate the property smoothly.

1.7. 例

function spaNavigate(%data) {
  updateTheDOMSomehow(%data);
}

function spaNavigate(%data) {
  /* 
この~APIを~supportしない~browser用の~fallback：
◎
Fallback for browsers that don't support this API:
 */
  if (!document.startViewTransition) {
    updateTheDOMSomehow(%data);
    return;
  }

  /* 
遷移を伴わせる：
◎
With a transition:
 */
  document.startViewTransition(() => updateTheDOMSomehow(%data));
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

.main-header {
  view-transition-name: main-header;
}

.main-header-text {
  view-transition-name: main-header-text;
  /* 
要素の~sizeを一貫させる
— ~textは変わらないと見做して：
◎
Give the element a consistent size, assuming identical text:
 */
  width: fit-content;
}

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

@keyframes slide-to-right {
  to { transform: translateX(30px); }
}

/* 
~sidebarが内へ来る遷移
◎
Entry transition
 */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* 
~sidebarが外へ出る遷移
◎
Exit transition
 */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* 
最後の~click~eventを格納する
◎
Store the last click event
 */
let %lastClick;
addEventListener('click', %event => (%lastClick = %event));

function spaNavigate(%data) {
  /* 
この~APIを~supportしない~browser用の~fallback：
◎
Fallback for browsers that don't support this API:
 */
  if (!document.startViewTransition) {
    updateTheDOMSomehow(%data);
    return;
  }

  /* 
~click位置を取得する
— できない場合、~screenの真中に~fall-backする：
◎
Get the click position, or fallback to the middle of the screen
 */
  const %x = %lastClick?.clientX ?? window.innerWidth / 2;
  const %y = %lastClick?.clientY ?? window.innerHeight / 2;
  /* 
最も遠い隅までの距離を取得する：
◎
Get the distance to the furthest corner
 */
  const %endRadius = Math.hypot(
    Math.max(%x, innerWidth - %x),
    Math.max(%y, innerHeight - %y)
  );

  /* 
遷移を作成する：
◎
Create a transition:
 */
  const %transition = document.startViewTransition(() => {
    updateTheDOMSomehow(%data);
  });

  /* 
疑似要素たちが作成されるまで待機する：
◎
Wait for the pseudo-elements to be created:
 */
  %transition.ready.then(() => {
    /* 
根の新たな~viewを~animateする：
◎
Animate the root's new view
 */
    document.documentElement.animate(
      {
        clipPath: [
          ``^`circle^(0 at ${%x}px ${%y}px)``^,
          ``^`circle^(${%endRadius}px at ${%x}px ${%y}px)``^,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        /* 
どの疑似要素を~animateするか指定する：
◎
Specify which pseudo-element to animate
 */
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

2.1. 個別に遷移している下位treeの~tag付け： `view-transition-name^p ~prop

注記： `view-transition-name$p は`離散的$に~animate可能であるが、 ~animateしても，稼働中な~view遷移には影響しない。 そうではなく、［ 時間~越しに／`時列線$に基づいて ］変化し得る仕方で，その値を設定する仕方を与える。 例えば、 `~scroll駆動な~animation$に基づいて `view-transition-name$p を変更することに利用できよう。 ◎ Note: though view-transition-name is discretely animatable, animating it doesn’t affect the running view transition. Rather, it’s a way to set its value in a way that can change over time or based on a timeline. An example for using this would be to change the view-transition-name based on scroll-driven animations.

`view-transition-name$p ~propは、 `~view遷移~内に捕捉され＠#captured-in-a-view-transition$た要素に対し， 指定された `~view遷移~名@ の下で［ `~view遷移~tree$内で独立に追跡する ］ために， “~tag” を付与する。 捕捉された要素は、 当の~pageを成す残りとは独立に~animateされる。 ◎ The view-transition-name property “tags” an element for capture in a view transition, tracking it independently in the view transition tree under the specified view transition name. An element so captured is animated independently of the rest of the page.

`none@v

`要素$は、 ~view遷移において独立に関与することはない。 ◎ The element will not participate independently in a view transition.

`custom-ident$t

`要素$は、 ~view遷移において， 指定された`~view遷移~名$を伴う［ 旧-／新- ］`要素$として独立に関与する。 ◎ The element participates independently in a view transition—as either an old or new element—with the specified view transition name.

各`~view遷移~名$は、 `~tree視野な名前$である。 ◎ Each view transition name is a tree-scoped name.

注記： 現時点では，文書~視野な~view遷移に限り~supportされるので、 当の文書に結付けられた~view遷移~名に限り尊重される。 ◎ Note: Since currently only document-scoped view transitions are supported, only view transition names that are associated with the document are respected.

この `custom-ident^t においては、 値［ `none^v, `auto^v, `match-element^v ］は除外される。 ◎ The values none, auto, and match-element are excluded from <custom-ident> here.

注記： この名前が一意でない場合 （すなわち、 同じ `~view遷移~名$が複数の要素に同時に指定された場合）、 `~view遷移$は中止されることになる。 ◎ Note: If this name is not unique (i.e. if two elements simultaneously specify the same view transition name) then the view transition will abort.

注記： この~APIの目的においては、［ 旧-状態~内にある要素, 新-状態~内にある別の要素 ］に同じ`~view遷移~名$ `foo^v が付与された場合、 それらは［ 同じ要素の異なる視覚-状態を表現している ］ものとして扱われ，`~view遷移~tree$内で~pairにされることになる。 それらの要素が同じ~objを指すことは必要yでないので，これは紛らわしくもなり得るが、 それらを［ 同じ概念的な~page実体を成す，視覚的な状態 ］であると見なすことは、 ~modelとして有用になる。 ◎ Note: For the purposes of this API, if one element has view transition name foo in the old state, and another element has view transition name foo in the new state, they are treated as representing different visual state of the same element, and will be paired in the view transition tree. This may be confusing, since the elements themselves are not necessarily referring to the same object, but it is a useful model to consider them to be visual states of the same conceptual page entity.

要素の`首要~box$が［ `断片化された＠~CSSBREAK#fragment$／ `飛ばされた＠~CSSCONTAIN#skips-its-contents$／ `描画され$ない ］場合、 この~propによる効果は無い。 正確な詳細は `§ ~algo＠#algorithms$ を見よ。 ◎ If the element’s principal box is fragmented, skipped, or not rendered, this property has no effect. See § 12 Algorithms for exact details.

3.1. 疑似要素~tree

注記： これは、 疑似要素たちが成す~tree用の一般な定義である。 他の特能にもこの挙動が必要になった場合、 これらの定義は `css-pseudo-4$r へ移動されることになる。 ◎ Note: This is a general definition for trees of pseudo-elements. If other features need this behavior, these definitions will be moved to [css-pseudo-4].

`疑似要素~根@ とは、 `疑似要素~tree$における`根$を指す，`~treeに留まる疑似要素$である。 ◎ A pseudo-element root is a type of tree-abiding pseudo-element that is the root in＼

`疑似要素~tree@ とは、 `~treeに留まる疑似要素$たちが成す`~tree$である。 ◎ a tree of tree-abiding pseudo-elements, known as the pseudo-element tree.

`疑似要素~tree$は、 その`子孫$たちの文書~順序を定義する。 ◎ The pseudo-element tree defines the document order of its descendant tree-abiding pseudo-elements.

`疑似要素$ %要素 が ある`疑似要素~tree$に`関与-$しているときは、 %要素 の`親$が %要素 の`出自の疑似要素$になる。 ◎ When a pseudo-element participates in a pseudo-element tree, its originating pseudo-element is its parent.

`疑似要素~根$のある`子孫$ %疑似要素 に自身以外に`同胞$は無い場合、 `only-child$ps は， %疑似要素 に合致する。 ◎ If a descendant pseudo of a pseudo-element root has no other siblings, then :only-child matches that pseudo.

注記： このことは、 `::view-transition-new(ident):only-child^css が `view-transition-new(ident)^pe を選択するのは、 親である `view-transition-image-pair(ident)^pe の`子$は 1 つしかない — すなわち，`同胞$である `view-transition-old(ident)^pe は無い — 場合に限られることを意味する。 ◎ Note: This means that ::view-transition-new(ident):only-child will only select ::view-transition-new(ident) if the parent ::view-transition-image-pair(ident) contains a single child. As in, there is no sibling ::view-transition-old(ident).

3.2. ~view遷移~用の疑似要素

`~view遷移$の視覚-化は、 `疑似要素~tree$として表現される — それは、 `~view遷移~tree@ と呼ばれ，以下に定義される `~view遷移~疑似要素@ たちから構成される。 この~treeは，`遷移~疑似要素たちを設定しておく$間に築かれ、［ `根~要素$を`出自の要素$とする `view-transition$pe 疑似要素 ］が，その根になる。 `~view遷移~疑似要素$を成すすべては、［ それらの`最終的な出自の要素$である，`文書~要素$【すなわち根~要素】 ］から【相対的に】選択される。 ◎ The visualization of a view transition is represented as a pseudo-element tree called the view transition tree composed of the view transition pseudo-elements defined below. This tree is built during the setup transition pseudo-elements step, and is rooted under a ::view-transition pseudo-element originating from the root element. All of the view transition pseudo-elements are selected from their ultimate originating element, the document element.

`~view遷移~tree$は、 ~accessibility~treeには公開されない。 ◎ The view transition tree is not exposed to the accessibility tree.

::view-transition
├─ ::view-transition-group(%name)
│  └─ ::view-transition-image-pair(%name)
│     ├─ ::view-transition-old(%name)
│     └─ ::view-transition-new(%name)
└─ …他の~groupたち…

::view-transition-%pseudo(`pt-name-selector$t)

`pt-name-selector@t
	= '*'
	| `custom-ident$t

4.1. ~snapshot包含塊

`~snapshot包含塊@ は、［ ~UIwindowを成す~page内容を表示するようになり得るもの ］が成す すべての区画を覆う矩形であり， （したがって［ 根~scrollbarや `ヤリトリありな~widget＠https://drafts.csswg.org/css-viewport/#interactive-widget$ ］に関わらず一貫する）。 これにより、 `文書~要素$の［ `旧-画像$cE, `新-要素$cE ］が一貫する見込みが高くなる。 ◎ The snapshot containing block is a rectangle that covers all areas of the window that could potentially display page content (and is therefore consistent regardless of root scrollbars or interactive widgets). This makes it likely to be consistent for the document element’s old image and new element.

`子~navigable$の中の`~snapshot包含塊$は、 当の~navigableの`表示域$に`~scrollbar側溝$（もしあれば）を併せた領域になる。 ◎ Within a child navigable, the snapshot containing block is the union of the navigable’s viewport with any scrollbar gutters.

`~snapshot包含塊の原点@ は、 `~snapshot包含塊$の左上~隅を指す。 ◎ The snapshot containing block origin refers to the top-left corner of the snapshot containing block.

`~snapshot包含塊の~size@ は、 `~snapshot包含塊$の［ 横幅, 縦幅 ］を順に与える， 2 個の実数が成す`~tuple$。 ◎ The snapshot containing block size refers to the width and height of the snapshot containing block as a tuple of two numbers.

`~snapshot包含塊$は、［ `view-transition$pe, その各~子孫 ］用の［ `絶対~位置決め包含塊$, `固定d位置決め包含塊$ ］を与えるものと見なされる。 ◎ The snapshot containing block is considered to be an absolute positioning containing block and a fixed positioning containing block for ::view-transition and its descendants.

4.2. ~view遷移における塗ng順序

この仕様は、 `CSS2$r `§ 積層~文脈の詳しい記述＠~CSS22/zindex.html#elaborate-stacking-contexts$ にて確立される塗ng順序の終端に， 新たな積層~層として`~view遷移~層$を導入する。 ◎ This specification introduces a new stacking layer, the view transition layer, to the end of the painting order established in CSS2§E Elaborate Description of Stacking Contexts. [CSS2]

`view-transition$pe 疑似要素は、 `~view遷移~層@ と呼ばれる新たな積層~文脈を生成する。 それは、 文書を成す他のすべての内容（`上端~層$内に描画される内容も含む）より後に塗られる — そのような内容に適用された~filterその他の効果があれば，それらより後に。 （それは、 そのような効果の~subjectにならない — 効果は、［［ `view-transition-old()$pe, `view-transition-new()$pe ］疑似要素を成す描画される内容 ］に影響する所までに限られる。） ◎ The ::view-transition pseudo-element generates a new stacking context, called the view transition layer, which paints after all other content of the document (including any content rendered in the top layer), after any filters and effects that are applied to such content. (It is not subject to such filters or effects, except insofar as they affect the rendered contents of the ::view-transition-old() and ::view-transition-new() pseudo-elements.)

注記： この特能の意図は、 ~pageを成す内容を，上端~層~内の要素を含めて捕捉-可能にすることにある。 それを成遂げるため、 `~view遷移~層$は，捕捉された積層~文脈の一部を成し得ない — そうすると循環依存になるので。 したがって、 `~view遷移~層$は，他のすべての内容の同胞になる。 ◎ Note: The intent of the feature is to be able to capture the contents of the page, which includes the top layer elements. In order to accomplish that, the view transition layer cannot be a part of the captured stacking contexts, since that results in a circular dependency. Therefore, the view transition layer is a sibling of all other content.

［ `文書$ %文書 にて`作動中な~view遷移$docの`相$vT ~EQ `~animate中$i ］の間は、［ %文書 内の要素のうち`~view遷移~内に捕捉され＠#captured-in-a-view-transition$たもの ］により生成される~box，および その`要素~内容$は、 `遷移~根~疑似要素$vTの`広義-子孫$を除いて ⇒＃ 塗られない（要素の `visibility$p は `hidden^v であったかのように）／ 接触判定に応答しない（要素の `pointer-events$p は `none^v であったかのように） ◎ When a Document’s active view transition’s phase is "animating", the boxes generated by any element in that Document with captured in a view transition and its element contents, except transition root pseudo-element’s inclusive descendants, are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none).

注記： 遷移に関与している要素は、 その~DOM内での所在における塗ngを飛ばす必要がある — それらの画像は、 代わりに，対応している `view-transition-new()$pe 疑似要素~内に塗られるので。 類似に，接触判定も飛ばされる — 要素の~DOM内での所在は、 その内容が描画される所には対応しないので。 しかしながら、 これらの要素が［ 支援技術／~accessibility~tree ］により どう~accessされるかは変化しない。 ◎ Note: Elements participating in a transition need to skip painting in their DOM location because their image is painted in the corresponding ::view-transition-new() pseudo-element instead. Similarly, hit-testing is skipped because the element’s DOM location does not correspond to where its contents are rendered. However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.

6.1. 概観

<!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>

6.2. 例

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

@view-transition {
  navigation: auto;
}

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

@view-transition {
  navigation: auto;
}

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

/* 
これは、
初期~読込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)'
    }
  );
})

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");
    });
  }

});

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);
      })
    }
  }
});

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

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

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

7.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:

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

7.2. 例

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

: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 {}

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) {}

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

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

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

`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.

8.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.

8.2. 例

<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;
}

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

`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 transition pseudo-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.

8.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]+

上の文法は、［ 次に挙げる箇所においては，空白は禁止される ］ものと解釈される： ◎ 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.

9.1. `Document^I に対する追加

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

callback `ViewTransitionUpdateCallback@I = `Promise$<`any$> ();

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

`viewTransition$V = document.`startViewTransition(callbackOptions)$m ◎ viewTransition = document.startViewTransition(updateCallback)

新たな`~view遷移$を開始する （`文書$に既存の`作動中な~view遷移$docがある場合、 それを取消した上で）。 ◎ Starts a new view transition (canceling the document’s existing active view transition, if any).

%callbackOptions により `更新~callback$V が供された場合、 それは，非同期的に — 当の文書の現在の状態が捕捉されたなら — ~callされる。 その後， %更新~callback が返した~promiseが充足されるとき、 当の文書の新-状態が捕捉され，遷移が起動される。 ◎ updateCallback, if provided, is called asynchronously, once the current state of the document is captured. Then, when the promise returned by updateCallback fulfills, the new state of the document is captured and the transition is initiated.

%更新~callback は、 供された場合は，遷移が起こり得ない場合でも （例：重複な `view-transition-name^p 値に因り）， `常に^em ~callされることに注意。 遷移は，状態~変更~周りの増補なので、 遷移を作成することに失敗しても， 【 %更新~callback による】状態~変更は決して防止されない。 この原則についての詳細は、 `§ 増補としての遷移＠#transitions-as-enhancements$ を見よ。 ◎ Note that updateCallback, if provided, is always called, even if the transition cannot happen (e.g. due to duplicate view-transition-name values). The transition is an enhancement around the state change, so a failure to create a transition never prevents the state change. See § 1.5 Transitions as an enhancement for more details on this principle.

%更新~callback が返した~promiseが却下された場合、 遷移は飛ばされる。 ◎ If the promise returned by updateCallback rejects, the transition is skipped.

9.2. `ViewTransition^I ~interface

[`Exposed$=Window]
interface `ViewTransition@I {
  readonly attribute `Promise$<`undefined$> `updateCallbackDone$m;
  readonly attribute `Promise$<`undefined$> `ready$m;
  readonly attribute `Promise$<`undefined$> `finished$m;
  `undefined$ `skipTransition$m();
  attribute `ViewTransitionTypeSet$I `types$m;
};

`ViewTransition$I ~interfaceは、 同一-文書な`~view遷移$ — すなわち、［ 開始~時の文書, 終了~時の文書 ］が同じで，場合によっては文書の~DOM構造に対する変更を伴う遷移 — を表現し，それを制御する。 ◎ The ViewTransition interface represents and controls a single same-document view transition, i.e. a transition where the starting and ending document are the same, possibly with changes to the document’s DOM structure.

`viewTransition$V.`updateCallbackDone$m

この~promiseは、 `更新~callback$V が返した~promiseが充足されたとき充足され， 却下されたとき却下される。 ◎ A promise that fulfills when the promise returned by updateCallback fulfills, or rejects when it rejects.

注記： `~view遷移^cite ~APIは， ~DOM変更を包装して視覚的な遷移を作成するが、 遷移~animationの［ 成功／失敗 ］について~careすることなく，当の~DOM変更が［ 起きたか否か, いつ起きたか ］を知ることだけ求まれるときもある。 `updateCallbackDone$m は、 そのような利用事例~用にある。 ◎ Note: The View Transition API wraps a DOM change and creates a visual transition. However, sometimes you don’t care about the success/failure of the transition animation, you just want to know if and when the DOM change happens. updateCallbackDone is for that use-case.)

`viewTransition$V.`ready$m

この~promiseは： ◎ ↓

• 遷移~用の疑似要素たちが作成され，~animationが開始しつつあるとき充足する。 ◎ A promise that fulfills once the pseudo-elements for the transition are created, and the animation is about to start.
• 遷移が始まり得ない場合には却下される。 `view-transition-name$p が重複しているなど，誤った環境設定に因り／ `updateCallbackDone$m が却下される~promiseを返した場合など。 ◎ It rejects if the transition cannot begin. This can be due to misconfiguration, such as duplicate view-transition-names, or if updateCallbackDone returns a rejected promise.

`ready$m が充足される時点は、 `~view遷移~疑似要素$を `~Web~animation~API＠~WANIMapi#extensions-to-the-element-interface$cite で~animateする理想的な機会である。 ◎ The point that ready fulfills is the ideal opportunity to animate the view transition pseudo-elements with the Web Animation API.

`viewTransition$V.`finished$m

この~promiseは： ◎ ↓

• 終了~状態が全部的に可視になり，利用者がヤリトリありになったなら充足される。 ◎ A promise that fulfills once the end state is fully visible and interactive to the user.

• 却下されるのは、 `更新~callback$V が却下される~promiseを返す場合に限られる — それは、 終了~状態が作成されなかったことを指示するので。 ◎ It only rejects if updateCallback returns a rejected promise, as this indicates the end state wasn’t created.

  他の場合、［ 遷移が始まるのに失敗したか （ `skipTransition()$m により）飛ばされた ］場合でも， 終了~状態には到達するので充足する。 ◎ Otherwise, if a transition fails to begin, or is skipped (by skipTransition()), the end state is still reached, so finished fulfills.

`viewTransition$V.`skipTransition$m()

遷移が開始されたなら即時に完遂させ，まだなら開始されないようにする。 ◎ Immediately finish the transition, or prevent it starting.

これにより `更新~callback$V が~callされなくなることは決してない — ~DOM変更は、 遷移とは独立なので。 この原則についての詳細は、 `§ 増補としての遷移＠#transitions-as-enhancements$ 見よ。 ◎ This never prevents updateCallback being called, as the DOM change is independent of the transition. See § 1.5 Transitions as an enhancement for more details on this principle.

`ready$m が解決される前に これが~callされた場合、 `ready$m は却下されることになる。 ◎ If this is called before ready resolves, ready will reject.

`finished$m が解決される前に これが~callされた場合、 `finished$m は `updateCallbackDone$m が決着するに伴い決着することになる。 ◎ If finished hasn’t resolved, it will fulfill or reject along with updateCallbackDone.

各 `ViewTransition$I %~view遷移 は、 次に挙げるものを有する： ◎ A ViewTransition has the following:

`有名~要素~群@vT ◎ named elements

ある`有順序~map$ — 各~entryの ⇒＃ ~keyは，`~view遷移~名$を与える。 値は，`捕捉された要素$を与える。 ◎ a map, whose keys are view transition names and whose values are captured elements.＼

初期~時は，新たな`有順序~map$とする。 ◎ Initially a new map.＼

注記： これは、 `ViewTransition$I に結付けられるので， `~view遷移を~clearする$が~callされたとき片付けられることになる。 ◎ Note: Since this is associated to the ViewTransition, it will be cleaned up when Clear view transition is called.

`相@vT ◎ phase

次に挙げるいずれかをとり， 挙げられた順に（場合によっては，一部を飛ばして）進捗する — 初期~時は `捕捉-待ち$i とする ⇒＃ `捕捉-待ち@i, `更新~callbackは~call済み@i, `~animate中@i, `済み@i ◎ One of the following ordered phases, initially "pending-capture": • "pending-capture". • "update-callback-called". • "animating". • "done".

注記： これらの相は，自動的に進捗するので、 この~APIを利用している開発者【作者】は， ほとんどにおいて どの相にあるか心配する必要はない。 しかしながら，どの手続きが どの相で起こるか — ~snapshotは いつ捕捉され, 疑似要素~DOMは いつ作成されるか, 等々 — を理解することは、 重要になる。 以下に与える各~相を成す記述は、［ 仕様に準拠する実装を生産するために従うべき一義的な手続きが成す集合 ］を実装者~向けに供する意図をもって，アリな限り精確であろうと試行する。 ◎ Note: For the most part, a developer using this API does not need to worry about the different phases, since they progress automatically. It is, however, important to understand what steps happen in each of the phases: when the snapshots are captured, when pseudo-element DOM is created, etc. The description of the phases below tries to be as precise as possible, with an intent to provide an unambiguous set of steps for implementors to follow in order to produce a spec-compliant implementation.

`更新~callback@vT ◎ update callback

~NULL ／ ある `ViewTransitionUpdateCallback$I ◎ a ViewTransitionUpdateCallback or null.＼

初期~時は ~NULL とする。 ◎ Initially null.

`準備済み時の~promise@vT ◎ ready promise

ある`~promise$ ◎ a Promise.＼

初期~時は，次を遂行した結果になるとする ⇒ `新たな~promise$( %~view遷移 に`関連な~realm$ ) ◎ Initially a new promise in this’s relevant Realm.

`更新~callback済み時の~promise@vT ◎ update callback done promise

ある`~promise$ ◎ a Promise.＼

初期~時は，次を遂行した結果になるとする ⇒ `新たな~promise$( %~view遷移 に`関連な~realm$ ) ◎ Initially a new promise in this’s relevant Realm.

注記： ［ `準備済み時の~promise$vT, `更新~callback済み時の~promise$vT ］は即時に作成されるので、 却下は — `取扱済みとして~markされ$ない限り， `updateCallbackDone$m などの取得子に~accessされなかった場合でも — `unhandledrejection$et を発火させることになる。 ◎ Note: The ready promise and update callback done promise are immediately created, so rejections will cause unhandledrejections unless they’re handled, even if the getters such as updateCallbackDone are not accessed.

`完遂-時の~promise@vT ◎ finished promise

ある`~promise$ ◎ a Promise.＼

初期~時は，次を遂行した結果になるとする：

1. %~promise ~LET `新たな~promise$( %~view遷移 に`関連な~realm$ )
2. `~promiseを取扱済みとして~markする$( %~promise )
3. ~RET %~promise

◎ Initially a new promise in this’s relevant Realm, marked as handled.

注記： `unhandledrejection$et が重複して発火されるのを防止するため、 これは，`取扱済みとして~markされ$る。 この~promiseが却下されるのは、 `更新~callback済み時の~promise$vTが却下されるときに限られるので。 ◎ Note: This is marked as handled to prevent duplicate unhandledrejections, as this promise only ever rejects along with the update callback done promise.

`遷移~根~疑似要素@vT ◎ transition root pseudo-element

ある `view-transition$pe ◎ a ::view-transition.＼

初期~時は新たな `view-transition^pe とする。 ◎ Initially a new ::view-transition.

`初期~snapshot包含塊~size@vT ◎ initial snapshot containing block size

~NULL ／［ 横幅, 縦幅 ］を順に与える 2 個の実数が成す`~tuple$ ◎ a tuple of two numbers (width and height), or null.＼

初期~時は ~NULL とする。 ◎ Initially null.

注記： これは、 `~snapshot包含塊の~size$における変化を検出するために利用される — そのような変化が生じた場合、 遷移は`飛ばされ$る。 この挙動の論点は、 `8045$issue にある。 ◎ Note: This is used to detect changes in the snapshot containing block size, which causes the transition to skip. Discussion of this behavior.

`作動中な型~群@vT ◎ active types

ある `ViewTransitionTypeSet$I — 【それが表現する`~set~entry群＠~WEBIDL#dfn-set-entries$は】初期~時は空とする。 ◎ A ViewTransitionTypeSet, initially empty.

`外へ出る捕捉-後の手続き@vT ◎ outbound post-capture steps

~NULL ／ ある手続き — 初期~時は ~NULL とする。 ◎ Null or a set of steps, initially null.

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

10.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.

10.2. 例

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

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

li {
  view-transition-name: auto;
  /* 
あるいは
◎
or
 */
  view-transition-name: match-element;
}

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

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

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

11.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.

11.2. 例

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

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

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

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

::view-transition
├─ ::view-transition-group(container)
│  ├─ ::view-transition-image-pair(container)
│  |  ├─ ::view-transition-old(container)
│  |  └─ ::view-transition-new(container)
│  └─ ::view-transition-group-children(container)
│     ├─ ::view-transition-group(article)
│     |  ├─ ::view-transition-old(article)
│     |  └─ ::view-transition-new(article)
│     └─ ...other nested groups...
└─ …other groups…

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

`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-group-children()$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 create a ::view-transition-group-children() pseudo-element, which would be the parent of the ::view-transition-group() generated for this element’s view-transition-name.

12.1. ~data構造

12.2. 処理待ち遷移~演算を遂行する

注記： この~algoは、 `描画を更新する段＠~WAPI#update-the-rendering$ `HTML$r の中から呼出される。 ◎ This algorithm is invoked as a part of update the rendering loop in the html spec.

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

12.4. 同一-文書な~view遷移を設定しておく

12.5. 非同一-文書な~view遷移を設定しておく

12.6. 更新~callbackを~callする

12.7. ~view遷移を飛ばす

12.8. ~view遷移の~page可視性~変化-時の手続き

12.9. 画像を捕捉する

12.10. 遷移~frameを取扱う

12.11. 疑似要素~styleを更新する

12.12. ~view遷移を~clearする