У меня есть анимация 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, но я не ограничиваюсь ими.
Просто установите для свойства animation помощью JavaScript значение "none" а затем установите тайм-аут, который изменит свойство на "", чтобы он снова наследовал от CSS.
Демонстрация для Webkit здесь: http://jsfiddle.net/leaverou/xK6sa/ Однако имейте в виду, что при использовании в реальном мире вы также должны включить -moz- (по крайней мере).
Нет необходимости в тайм-ауте, используйте 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>Если у вас есть класс для анимации 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
});
Создайте второй "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%;}
}
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://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)
}
надеюсь, что я помог!
На 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