Перезапустить анимацию в CSS3: лучше, чем удалить элемент?

У меня есть анимация CSS3, которую нужно перезапустить одним кликом. Это бар, показывающий, сколько времени осталось. Я использую преобразование scaleY (0) для создания эффекта.

Теперь мне нужно перезапустить анимацию, восстановив панель до scaleY (1) и снова верните ее в scaleY (0). Моя первая попытка установить scaleY (1) не удалась, потому что она принимает те же 15 секунд, чтобы вернуть ее на полную длину. Даже если я изменил продолжительность до 0,1 секунды, мне нужно было бы задержать или связать назначение scaleY (0), чтобы пополнение бара завершилось. Это слишком сложно для такой простой задачи.

Я также нашел интересный совет, чтобы перезапустить анимацию, удалив элемент из документа, а затем снова вставив клон: http://css-tricks.com/restart-css-animation/

Это работает, но есть ли лучший способ перезапустить анимацию CSS? Я использую Prototype и Move.js, но я не ограничиваюсь ими.

Ответ 1

Просто установите для свойства animation помощью JavaScript значение "none" а затем установите тайм-аут, который изменит свойство на "", чтобы он снова наследовал от CSS.

Демонстрация для Webkit здесь: http://jsfiddle.net/leaverou/xK6sa/ Однако имейте в виду, что при использовании в реальном мире вы также должны включить -moz- (по крайней мере).

Ответ 2

Нет необходимости в тайм-ауте, используйте reflow, чтобы применить изменения:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

#animated {
  position: absolute;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>

Ответ 3

Если у вас есть класс для анимации css3, для exapmle.blink, вы можете removeClass для какого-то элемента и addClass для этого элемента мысли setTimeout с 1 миллисекундой щелчком.

  $("#element").click(function(){
     $(this).removeClass("blink");

     setTimeout(function(){
       $(this).addClass("blink);
    },1 ///it may be only 1 milisecond, it enough
  });

Ответ 4

Создайте второй "keyframe @", который перезапустит вашу анимацию, только проблема с этим вы не можете установить какие-либо свойства анимации для перезапуска анимации (она просто отбрасывается)

----- HTML -----

<div class="slide">
    Some text..............
    <div id="slide-anim"></div>
</div><br>
    <button onclick="slider()"> Animation </button>
    <button id="anim-restart"> Restart Animation </button>
<script>
    var animElement = document.getElementById('slide-anim');
    document.getElementById('anim-restart').addEventListener("mouseup", restart_slider);

    function slider() {
        animElement.style.animationName = "slider";             // other animation properties are specified in CSS
    }
    function restart_slider() {
        animElement.style.animation = "slider-restart";         
    }
</script>

----- CSS -----

.slide {
    position: relative;
    border: 3px black inset;
    padding: 3px;
    width: auto;
    overflow: hidden;
}
.slide div:first-child {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(wood.jpg) repeat-x;
    left: 0%;
    top: 0%;            
    animation-duration: 2s;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.33,.99,1,1); 
}

@keyframes slider {
    to {left: 100%;}
}

@keyframes slider-restart {
    to {left: 0%;}
}

Ответ 5

Реализовать анимацию как дескриптор CSS
Добавьте дескриптор к элементу, чтобы запустить анимацию
Используйте функцию обработчика события animationend чтобы удалить дескриптор после завершения анимации, чтобы он был готов для добавления снова в следующий раз, когда вы захотите перезапустить анимацию.

--- --- HTML

<div id="animatedText">
Animation happens here
</div>

<script>

  function startanimation(element) {

    element.classList.add("animateDescriptor");

    element.addEventListener( "animationend",  function() {

      element.classList.remove("animateDescriptor");    

    } );

  }

</script>


<button onclick="startanimation( document.getElementById('animatedText') )">
Click to animate above text
</button>

--- --- CSS

@keyframes fadeinout {  
      from { color: #000000; }  
    25% {color: #0000FF; }  
    50% {color: #00FF00; }      
    75% {color: #FF0000; }  
      to { color : #000000; }   
  } 

  .animateDescriptor {  
    animation: fadeinout 1.0s;  
  }

Попробуйте это здесь:

https://jsfiddle.net/bigjosh/avp9Lk6r/50/

Ответ 6

на этой странице вы можете прочитать о перезапуске анимации элементов: https://css-tricks.com/restart-css-animation/ вот мой пример:

 <head>
        <style>
            @keyframes selectss
{
    0%{opacity: 0.7;transform:scale(1);} 
    100%{transform:scale(2);opacity: 0;}
}
        </style>
        <script>
            function animation()
            {
                var elm = document.getElementById('circle');
                elm.style.animation='selectss 2s ease-out';
                var newone = elm.cloneNode(true);
                elm.parentNode.replaceChild(newone, elm);
            }
        </script>
    </head>
    <body>
        <div id="circle" style="height: 280px;width: 280px;opacity: 0;background-color: aqua;border-radius: 500px;"></div>
        <button onclick="animation()"></button>
    </body>

но если вы хотите, вы можете просто удалить анимацию элемента и затем вернуть ее:

function animation()
        {
            var elm = document.getElementById('circle');
            elm.style.animation='';
            setTimeout(function () {elm.style.animation='selectss 2s ease-out';},10)
        }

надеюсь, что я помог!

Ответ 7

На MDN есть ответ, который похож на подход с перекомпоновкой:

<div class="box">
</div>

<div class="runButton">Click me to run the animation</div>

@keyframes colorchange {
  0% { background: yellow }
  100% { background: blue }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}

function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips