Skip to content

Commit

Permalink
2023/03/07 時点の英語版に基づき新規翻訳
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Oct 5, 2023
1 parent cbc5c02 commit 2c932fa
Showing 1 changed file with 57 additions and 0 deletions.
57 changes: 57 additions & 0 deletions files/ja/web/css/view-transition-name/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: view-transition-name
slug: Web/CSS/view-transition-name
l10n:
sourceCommit: 1a27ade8c981c8a98c8fac9881b362e881a4d236
---

{{CSSRef}}{{SeeCompatTable}}

**`view-transition-name`**[CSS](/ja/docs/Web/CSS) のプロパティで、選択された要素に識別名 ({{cssxref("custom-ident")}}) を与え、ルートビュートランジションとは別の[ビュートランジション](/ja/docs/Web/API/View_Transitions_API)に参加させます。 `none` の値が指定された場合はビュートランジションを行いません。

## 構文

```css
/* <custom-ident> 値の例 */
view-transition-name: header;
view-transition-name: figure-caption;

/* キーワード値 */
view-transition-name: none;
```

### 値

- {{cssxref("custom-ident")}}
- : 選択した要素を、ルートビュートランジションとは別の[ビュートランジション](/ja/docs/Web/API/View_Transitions_API)に参加させるための識別名です。識別子は一意でなければなりません。 2 つのレンダリング要素が同時に同じ `view-transition-name` を持つ場合、 {{domxref("ViewTransition.ready")}} は拒否され、トランジションはスキップされます。
- `none`
- : 選択された要素はビュートランジションに参加しません。

## 公式定義

{{cssinfo}}

## 形式文法

{{csssyntax}}

## 例

```css
figcaption {
view-transition-name: figure-caption;
}
```

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}

## 関連情報

- [ビュートランジション API](/ja/docs/Web/API/View_Transitions_API)
- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)

0 comments on commit 2c932fa

Please sign in to comment.