From 9cc34ef8908fc45c5977fcab5a0fd954672c6861 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 3 Oct 2023 23:54:49 +0900 Subject: [PATCH] =?UTF-8?q?2023/03/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 files/ja/web/css/_doublecolon_view-transition-image-pair/index.md diff --git a/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md b/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md new file mode 100644 index 00000000000000..8d4853c4197d96 --- /dev/null +++ b/files/ja/web/css/_doublecolon_view-transition-image-pair/index.md @@ -0,0 +1,64 @@ +--- +title: "::view-transition-image-pair" +slug: Web/CSS/::view-transition-image-pair +l10n: + sourceCommit: 1a27ade8c981c8a98c8fac9881b362e881a4d236 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`::view-transition-image-pair`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ビュートランジション](/ja/docs/Web/API/View_Transitions_API)の「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。 + +ビュートランジションの間、 `::view-transition-image-pair` は[ビュートランジションのプロセス](/ja/docs/Web/API/View_Transitions_API#ビュートランジションのプロセス)で説明されているように、関連する擬似要素のツリーとして表現されます。これは {{cssxref("::view-transition-group")}} の子にしかなりません。子という意味では、 {{cssxref("::view-transition-new")}} または {{cssxref("::view-transition-old")}}、あるいはその両方を持つことができます。 + +UA スタイルシートでは `::view-transition-image-pair` に以下の既定値が指定されています。 + +```css +html::view-transition-image-pair(*) { + position: absolute; + inset: 0; + + animation-duration: inherit; + animation-fill-mode: inherit; +} +``` + +ビュートランジションの間、 `::view-transition-image-pair` は {{cssxref("isolation", "isolation: isolate")}} をビュートランジションスタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。 + +## 構文 + +```css-nolint +::view-transition-image-pair() { + /* ... */ +} +``` + +`` は以下の値のうちのいずれかです。 + +- `*` + - : 擬似要素が、すべてのビュートランジショングループに一致するようにします。 +- `root` + - : 擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 {{cssxref("view-transition-name")}} プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。 +- {{cssxref("custom-ident")}} + - : 擬似要素が、指定された {{cssxref("custom-ident")}} を {{cssxref("view-transition-name")}} プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。 + +## 例 + +```css +::view-transition-image-pair(root) { + isolation: auto; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュートランジション API](/ja/docs/Web/API/View_Transitions_API) +- [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/)