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

Question

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

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

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

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

Answer 1

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

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

Answer 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>

Answer 3

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

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

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

Answer 4

1. Реализация анимации в виде дескриптора CSS
2. Добавление дескриптора к элементу для запуска анимации
3. Использование функции обработчика событий 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/

Answer 5

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

----- 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%;}
}

Answer 6

На 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

Answer 7

на этой странице вы можете прочитать о перезапуске элемента animation: 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)
        }

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