diff options
Diffstat (limited to 'files/ru/web/css/css_animations/tips/index.html')
| -rw-r--r-- | files/ru/web/css/css_animations/tips/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..8b4468729d --- /dev/null +++ b/files/ru/web/css/css_animations/tips/index.html @@ -0,0 +1,150 @@ +--- +title: CSS Animations tips and tricks +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +<div>{{cssref}}</div> + +<p>CSS-анимация позволяет делать невероятные вещи с элементами, из которых состоят ваши документы и приложения. Однако есть вещи, которые не являются очевидными и, о способах реализации которых, вы не знаете, но вы бы хотели их реализовать. Эта статья представляет собой набор советов и трюков, которые мы нашли, чтобы облегчить вашу работу. В том числе, как снова запустить остановленную анимацию.</p> + +<h2 id="Run_an_animation_again" name="Run_an_animation_again">Запустить анимацию снова</h2> + +<p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p> + +<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p> + +<h3 id="HTML_содержимое">HTML содержимое</h3> + +<p>Во-первых, давайте определим HTML для {{HTMLElement("div")}} который мы хотим анимировать, и кнопку, которая будет запускать (или воспроизводить) анимацию.</p> + +<pre class="brush: html"><div class="box"> +</div> + +<div class="runButton">Click me to run the animation</div></pre> + +<h3 id="CSS_содержимое">CSS содержимое</h3> + +<p>Теперь мы определим саму анимацию с помощью CSS. Некоторые стили CSS, которые не важны (стиль самой кнопки "выполнить"), здесь не показаны, для краткости.</p> + +<div class="hidden"> +<pre class="brush: css">.runButton { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 12px; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +}</pre> +</div> + +<pre class="brush: css">@keyframes colorchange { + 0% { background: yellow } + 100% { background: blue } +} + +.box { + width: 100px; + height: 100px; + border: 1px solid black; +} + +.changing { + animation: colorchange 2s; +}</pre> + +<p>Здесь есть два класса. В классе <code>"box"</code> прописано основное описание внешнего вида элемента, без какой-либо анимационной информации. Детали анимации включены в класс <code>"changing"</code> , который сообщает, что {{cssxref("@keyframes")}} с именем <code>"colorchange"</code> должен использоваться в течение 2 секунд.</p> + +<p>Обратите внимание, что каких-либо анимационных эффектов у элемента не наблюдается, т.е. анимации нет.</p> + +<h3 id="JavaScript_содержимое">JavaScript содержимое</h3> + +<p>Далее мы рассмотрим JavaScript, который дополняет эту работу. Основа этой техники находится в функции play (), которая вызывается, когда пользователь нажимает на кнопку "Выполнить".</p> + +<pre class="brush: js">function play() { + document.querySelector(".box").className = "box"; + window.requestAnimationFrame(function(time) { + window.requestAnimationFrame(function(time) { + document.querySelector(".box").className = "box changing"; + }); + }); +}</pre> + +<p>Это выглядит странно, не так ли? Это потому, что единственный способ воспроизвести анимацию снова-удалить анимационный эффект, позволить документу пересчитать стили так, чтобы он знал, что вы это сделали, а затем добавить анимационный эффект обратно в элемент. Чтобы это произошло, мы должны быть креативными.</p> + +<p>Вот что происходит, когда вызывается функция <code>play()</code> :</p> + +<ol> + <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li> + <li>Чтобы убедиться, что стили пересчитаны, мы используем {{domxref("window.requestAnimationFrame()")}}, указывающую обратный вызов. Наш обратный вызов выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li> + <li>Наш обратный вызов ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз обратный вызов выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот обратный вызов добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li> +</ol> + +<p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p> + +<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p> + +<h2 id="Остановка_анимации">Остановка анимации</h2> + +<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p> + +<ol> + <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li> + <li>Используйте JavaScript и очистите анимацию, используемую при запуске события<code>animationiteration</code> .</li> +</ol> + +<p>Следующая демонстрация показывает, как вы могли бы достичь вышеупомянутой техники JavaScript:</p> + +<pre class="brush: css">.slidein { + animation-duration: 5s; + animation-name: slidein; + animation-iteration-count: infinite; +} + +.stopped { + animation-name: none; +} + +@keyframes slidein { + 0% { + margin-left: 0%; + } + 50% { + margin-left: 50%; + } + 100% { + margin-left: 0%; + } +} +</pre> + +<pre class="brush: html"><h1 id="watchme">Click me to stop</h1> +</pre> + +<pre class="brush: js">let watchme = document.getElementById('watchme') + +watchme.className = 'slidein' +const listener = (e) => { + watchme.className = 'slidein stopped' +} +watchme.addEventListener('click', () => + watchme.addEventListener('animationiteration', listener, false) +) +</pre> + +<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li> + <li>{{domxref("Window.requestAnimationFrame()")}}</li> +</ul> |