diff options
Diffstat (limited to 'files/zh-tw/web/api/animationevent/index.html')
-rw-r--r-- | files/zh-tw/web/api/animationevent/index.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/animationevent/index.html b/files/zh-tw/web/api/animationevent/index.html new file mode 100644 index 0000000000..d4528894b5 --- /dev/null +++ b/files/zh-tw/web/api/animationevent/index.html @@ -0,0 +1,182 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - CSS + - CSS Animations + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/AnimationEvent +--- +<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> + +<h2 id="摘要">摘要</h2> + +<p><strong><code>AnimationEvent</code></strong> 介面表現提供<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_animations">動畫</a>相關資訊的事件。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="性能">性能</h2> + +<p><em>另外從其父 {{domxref("Event")}} 繼承屬性</em>。</p> + +<dl> + <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> + <dd>是一個{{domxref("DOMString")}}包含的值 {{cssxref("animation-name")}} CSS屬性與過渡有關。</dd> + <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> + <dd>是一個<code>float</code>給予時間的動畫已經運行,以秒為單位,當該事件燒製,不含動畫被暫停的任何時間量。為一個<code>"animationstart"</code>事件,<code>elapsedTime</code>是<code>0.0</code>,除非有一個負值{{cssxref("animation-delay")}},在這種情況下,該事件將與燒製<code>elapsedTime</code>含有 <code>(-1 * </code><em>delay</em><code>)</code>。</dd> + <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> + <dd>是一個{{domxref("DOMString")}},從<code>"::"</code>,包含的名字<a href="/zh-TW/docs/Web/CSS/Pseudo-elements">虛擬元素</a>的動畫運行。如果動畫上不偽元素,但該元素,一個空字符串上運行<code>:''。</code></dd> +</dl> + +<h2 id="構造函數">構造函數</h2> + +<dl> + <dt>{{domxref("AnimationEvent.AnimationEvent","AnimationEvent()")}}</dt> + <dd>創建一個<code>AnimationEvent</code>事件具有給定參數。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p><em>同時繼承其父{{domxref("事件")}}方法</em>。</p> + +<dl> + <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>初始化<code>AnimationEvent</code> 使用過時的創建 {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} 方法。</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">產品規格</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>初始定義。</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特點</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0 {{ property_prefix("webkit") }}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>10.0</td> + <td>12 {{property_prefix("O")}}<br> + 12.10<br> + 15.0 {{ property_prefix("webkit") }}</td> + <td>4.0 {{ property_prefix("webkit") }}</td> + </tr> + <tr> + <td><code>AnimationEvent()</code>構造函數</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + 在{{CompatGeckoDesktop("23.0")}}刪除</td> + <td>10.0</td> + <td>12</td> + <td>4</td> + </tr> + <tr> + <td><code>pseudoelement</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特點</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>10.0</td> + <td>12 {{ property_prefix("o") }}<br> + 12.10<br> + 15.0 {{ property_prefix("webkit") }}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>AnimationEvent()</code>構造函數</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6.0")}}<br> + 在{{CompatGeckoMobile("23.0")}}刪除</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>pseudoelement</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另請參見">另請參見</h2> + +<ul> + <li><a href="/zh-TW/docs/CSS/Using_CSS_animations">使用CSS動畫</a></li> + <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> +</ul> |