From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../onanimationcancel/index.html | 247 +++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 files/ru/web/api/globaleventhandlers/onanimationcancel/index.html (limited to 'files/ru/web/api/globaleventhandlers/onanimationcancel') 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 +--- +
{{APIRef("CSS3 Animations")}}
+ +

Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (CSS Animation) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт  (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. 

+ +

Синтакс

+ +
var animCancelHandler = target.onanimationcancel;
+
+target.onanimationcancel = {{jsxref("Function")}}
+
+ +

Значения

+ +

Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте target, где объект target object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}).  Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.

+ +

Пример

+ +

HTML content

+ +
<div class="main">
+  <div id="box" onanimationcancel="handleCancelEvent(event);">
+    <div id="text">Box</div>
+  </div>
+</div>
+
+<div class="button" id="toggleBox">
+  Hide the Box
+</div>
+
+<pre id="log"></pre>
+ +

CSS content

+ + + +

Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. 

+ +
#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;
+}
+
+
+ +

Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.

+ +
@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+
+ +

Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.

+ +

JavaScript content

+ +

Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.

+ +
function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " <code>"+ event.animationName +
+        "</code> at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+
+ +

Затем мы устанавливаем обработчик событий handleCancelEvent() - функцию, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.

+ +
function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+
+ +

Теперь добавим переключение {{cssxref("display")}} между "flex" и "none" и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":

+ +
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";
+  }
+});
+
+ +

Таким образом переключение стилей элемента display: none приводит к прерыванию анимации.  In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.

+ +
+

At this time, no major browser supports animationcancel.

+
+ +

Result

+ +

Assembled together, you get this:

+ +

{{ EmbedLiveSample('Example', 500, 400) }}

+ +

If your browser supports animationcancel, hiding the box using the button will cause a message to be displayed about the event.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}{{Spec2('CSS3 Animations')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatGeckoMobile(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf