initial commit

1 files changed, 247 insertions, 0 deletions

diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
new file mode 100644
index 0000000000..c1b865945d
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
@@ -0,0 +1,247 @@
+---
+title: GlobalEventHandlers.onanimationcancel
+slug: Web/API/GlobalEventHandlers/onanimationcancel
+translation_of: Web/API/GlobalEventHandlers/onanimationcancel
+---
+<div>{{APIRef("CSS3 Animations")}}</div>
+
+<p>Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт  (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. </p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel;
+
+<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}).  Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div id="box" onanimationcancel="handleCancelEvent(event);"&gt;
+    &lt;div id="text"&gt;Box&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="button" id="toggleBox"&gt;
+  Hide the Box
+&lt;/div&gt;
+
+&lt;pre id="log"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  --boxwidth:50px;
+}
+
+.main {
+  width: 300px;
+  height:300px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 0;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+#text {
+  width: 46px;
+  padding: 10px;
+  position: relative;
+  text-align: center;
+  align-self: center;
+  color: white;
+  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
+}
+
+ </pre>
+</div>
+
+<p>Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p>
+
+<pre class="brush: css">#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 5s ease-in-out 0s infinite alternate both slideBox;
+}
+
+</pre>
+
+<p>Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.</p>
+
+<pre class="brush: css">@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+</pre>
+
+<p>Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<p>Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.</p>
+
+<pre class="brush: js">function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " &lt;code&gt;"+ event.animationName +
+        "&lt;/code&gt; at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+</pre>
+
+<p>Затем мы устанавливаем обработчик событий <code>handleCancelEvent() - функцию</code>, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.</p>
+
+<pre class="brush: js">function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+</pre>
+
+<p>Теперь добавим переключение {{cssxref("display")}} между <code>"</code><code>flex"</code> и <code>"</code><code>none"</code> и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":</p>
+
+<pre class="brush: js">document.getElementById('toggleBox').addEventListener('click', function() {
+  if (box.style.display == "none") {
+    box.style.display = "flex";
+    document.getElementById("toggleBox").innerHTML = "Hide the box";
+  } else {
+    box.style.display = "none";
+    document.getElementById("toggleBox").innerHTML = "Show the box";
+  }
+});
+</pre>
+
+<p>Таким образом переключение стилей элемента <code>display: none</code> приводит к прерыванию анимации.  In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p>
+
+<div class="note">
+<p>At this time, no major browser supports <code>animationcancel</code>.</p>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>Assembled together, you get this:</p>
+
+<p>{{ EmbedLiveSample('Example', 500, 400) }}</p>
+
+<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{event("animationcancel")}} event this event handler is triggered by.</li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>