-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
130 lines (90 loc) · 5.27 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
---
title: "Element: transitioncancel イベント"
short-title: transitioncancel
slug: Web/API/Element/transitioncancel_event
l10n:
sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
---
{{APIRef}}
**`transitioncancel`** イベントは、 [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)がキャンセルされたときに発生します。
## 構文
このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
```js
addEventListener("transitioncancel", (event) => {});
ontransitioncancel = (event) => {};
```
## イベント型
{{domxref("TransitionEvent")}} です。 {{domxref("Event")}} を継承しています。
{{InheritanceDiagram("TransitionEvent")}}
## イベントプロパティ
_親である {{domxref("Event")}} から継承したプロパティもあります。_
- {{domxref("TransitionEvent.propertyName")}} {{ReadOnlyInline}}
- : 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
- {{domxref("TransitionEvent.elapsedTime")}} {{ReadOnlyInline}}
- : float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
- {{domxref("TransitionEvent.pseudoElement")}} {{ReadOnlyInline}}
- : 文字列で、アニメーションが実行する[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。
## 例
このコードはトランジションを定義している要素を取得し、`transitioncancel` イベントのリスナーを追加します。
```js
const transition = document.querySelector(".transition");
transition.addEventListener("transitioncancel", () => {
console.log("Transition canceled");
});
```
同じことを、`ontransitioncancel` プロパティを `addEventListener()` の代わりに使用して行った例です。
```js
const transition = document.querySelector(".transition");
transition.ontransitioncancel = () => {
console.log("Transition canceled");
};
```
### ライブ例
次の例では、単純な {{htmlelement("div")}} 要素に遅延を含むトランジションをスタイル設定しています。
```html
<div class="transition"></div>
<div class="message"></div>
```
```css
.transition {
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 1);
transition-property: transform, background;
transition-duration: 2s;
transition-delay: 2s;
}
.transition:hover {
transform: rotate(90deg);
background: rgba(255, 0, 0, 0);
}
```
これにいくらかの JavaScript を追加して、[`transitionstart`](/ja/docs/Web/API/Element/transitionstart_event)、[`transitionrun`](/ja/docs/Web/API/Element/transitionrun_event)、`transitioncancel`、[`transitionend`](/ja/docs/Web/API/Element/transitionend_event) の各イベントが発生すると実行されるようにします。この例では、トランジションをキャンセルするには、トランジションが終了する前にトランジション中のボックスに宛てたマウスを外してください。トランジション終了イベントを発生させるには、トランジションが終了するまでトランジションの上にマウスを当てたままにしてください。
```js
const message = document.querySelector(".message");
const el = document.querySelector(".transition");
el.addEventListener("transitionrun", () => {
message.textContent = "transitionrun が発生";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart が発生";
});
el.addEventListener("transitioncancel", () => {
message.textContent = "transitioncancel が発生";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend が発生";
});
```
{{ EmbedLiveSample('Live_example', '100%', '150px') }}
`transitioncancel` イベントは `transitionrun` イベントが発生した後、`transitionend` イベントが発生する前にトランジションがどちらかの方向に取り消された場合に発行されます。
トランジションの遅延や再生時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。
`transitioncancel` イベントが発行された場合、`transitionend` イベントは発行されません。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("TransitionEvent")}} インターフェイス
- CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
- 関連イベント: {{domxref("Element/transitionrun_event", "transitionrun")}}, {{domxref("Element/transitionstart_event", "transitionstart")}}, {{domxref("Element/transitionend_event", "transitionend")}}