diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/animationevent | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/api/animationevent')
-rw-r--r-- | files/ru/web/api/animationevent/animationevent/index.html | 67 | ||||
-rw-r--r-- | files/ru/web/api/animationevent/index.html | 182 |
2 files changed, 249 insertions, 0 deletions
diff --git a/files/ru/web/api/animationevent/animationevent/index.html b/files/ru/web/api/animationevent/animationevent/index.html new file mode 100644 index 0000000000..11d4a5cc71 --- /dev/null +++ b/files/ru/web/api/animationevent/animationevent/index.html @@ -0,0 +1,67 @@ +--- +title: AnimationEvent() +slug: Web/API/AnimationEvent/AnimationEvent +translation_of: Web/API/AnimationEvent/AnimationEvent +--- +<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p> + +<p>The <code><strong>AnimationEvent()</strong></code> constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>, + elapsedTime : <em>aFloat</em>, + pseudoElement: <em>aPseudoElementName</em>}); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<p><em>Конструктор <code>AnimationEvent()</code> также наследует аргументы от объекта {{domxref("Event.Event", "Event()")}}.</em></p> + +<dl> + <dt><code>type</code></dt> + <dd>A {{domxref("DOMString")}} representing the name of the type of the <code>AnimationEvent</code>. It is case-sensitive and can be: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd> + <dt><code>animationName</code> {{optional_inline}}</dt> + <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to <code>""</code>.</dd> + <dt><code>elapsedTime</code> {{optional_inline}}</dt> + <dd>A <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>. It defaults to <code>0.0</code>.</dd> + <dt><code>pseudoElement</code> {{optional_inline}}</dt> + <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td> + <td>{{ Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</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> + <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li> +</ul> diff --git a/files/ru/web/api/animationevent/index.html b/files/ru/web/api/animationevent/index.html new file mode 100644 index 0000000000..746d34bfed --- /dev/null +++ b/files/ru/web/api/animationevent/index.html @@ -0,0 +1,182 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +translation_of: Web/API/AnimationEvent +--- +<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> + +<p>AnimationEvent - это интерфейс представляющий события, содержащии информацию, связанную с анимацией.</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 свойств связанных с <strong>transition.</strong></dd> + <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> + <dd>Является числом с плавающей точкой, которое задаёт коливество времени от начала анимации в секундах, когда это событие отклоненно, несмотря на какое-либо время анимация была остановленна.Для события "animationstart" , elapsedTime равно <code>0.0 если не было заданно отрицательное значение для </code>{{cssxref("animation-delay")}}, в этом случае событие будет срабатывать с elapsedTime содержащим <code>(-1 * </code><em>delay</em><code>)</code>.</dd> + <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> + <dd>Является {{domxref("DOMString")}}, начинающийся с '::', содержащий имя <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемента </a> ,на котором работает анимация.Если анимация не работает на псевдо-элементе, но работает на элементе,значит указанна пустая строка ' '. </dd> + <dt> + <h2 id="Конструктор">Конструктор</h2> + + <p> </p> + </dt> + <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt> + <dd>Создаёт событие AnimationEvent с передачей параметров.</dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<p><em>Также наследуют методы от родителя {{domxref("Event")}}</em>.</p> + +<dl> + <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>Инициализирует AnimationEvent созданную используя резко суждённый метод {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd> + <dt> + <h2 id="Спецификация">Спецификация</h2> + + <p> </p> + </dt> + <dt> + <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> + <p>Определяет инициализацию</p> + </td> + </tr> + </tbody> + </table> + </dt> +</dl> + +<h2 id="Поддержка_браузерами"> Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<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> + <p>1.0 {{ property_prefix("webkit") }}</p> + + <p>{{CompatChrome(43.0)}}</p> + </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> + <p>{{CompatChrome(43.0)}}</p> + </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> + Removed in {{ CompatGeckoDesktop("23.0") }}</td> + <td>10.0</td> + <td>12</td> + <td>4.0</td> + </tr> + <tr> + <td><code>Псевдо-элемент</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("23.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</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> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>initAnimationEvent()</code>{{non-standard_inline}}{{deprecated_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("6.0") }}<br> + Removed in {{ CompatGeckoMobile("23.0") }}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Псевдо-элемент</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("23.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Использование CSS анимации</a></li> + <li>Анимация связанных CSS свойств и по правилам: {{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> |