JavaScript classList добавлять и удалять функции с помощью анимации CSS [duplicate]
Я всегда проверял количество открытых книг в Workbook_Open (). Если это 1, то рабочая книга была открыта командной строкой (или пользователь закрыл все книги, а затем открыл это).
If Workbooks.Count = 1 Then
' execute the macro or call another procedure - I always do the latter
PublishReport
ThisWorkbook.Save
Application.Quit
End If
6 ответов
Просто установите свойство animation с помощью JavaScript на "none", а затем установите тайм-аут, который изменяет свойство на "", поэтому он снова наследует от CSS.
Демо для Webkit здесь: http://jsfiddle.net/leaverou/xK6sa/ Однако имейте в виду, что в реальном мире вы также должны включать -moz- (по крайней мере).
на этой странице вы можете прочитать о перезапуске анимации элементов: 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)
}
надеюсь, что я помог!
Нет необходимости в тайм-ауте, используйте 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>-
1Вы также можете активировать оплату, вызвав любой из этих свойств / метод , а не только
offsetHeight. – Fahmi 19 January 2018 в 10:08 -
2
-
3не вызывает перезарядку, имеет ли производительность удар? как это соотносится с выбранным ответом, с точки зрения производительности? – eiko 24 July 2018 в 16:03
Создайте второй «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%;}
}
Если у вас есть некоторый класс для анимации css3, для exapmle .blink , вы можете удалитьClass для некоторого элемента и addClass для этого элемента think setTimeout с 1 миллисекундой щелчком.
$("#element").click(function(){
$(this).removeClass("blink");
setTimeout(function(){
$(this).addClass("blink);
},1 ///it may be only 1 milisecond, it's enough
});
var anim = jQuery(mutation.target).find(".background.background-image:first").get(0); anim.style.WebkitAnimation = 'none'; anim.style.animation = 'none'; setTimeout(function() { anim.style.WebkitAnimation = ''; anim.style.animation = ''; }, 10); }– dheil 24 February 2017 в 15:45