动画完成后移除class
Remove class after animation is completed
我有所有 div
和 class loaded
的动画序列。
目标是将 class visible
添加到这些 div
(这是一个 css 不透明动画),然后删除 class loaded
一旦动画是 completed/finished.
$('.loaded').each(function(index) {
(function(that, i) {
var t = setTimeout(function() {
$(that).addClass("visible");
}, 200 * i);
})(this, index);
});
感谢您的帮助!
您可以为 transitionend
or animationend
events with jQuery .on()
附加事件侦听器,然后在回调
中删除 class
您使用哪一个取决于您处理动画的方式:
animationend
对于 @keyframes/animation
transitionend
对于 transition
$('.loaded').each(function(index) {
(function(that, i) {
setTimeout(function() {
$(that).addClass("visible");
$(that).on('transitionend', () => {
$(that).removeClass('loaded')
});
}, 200 * i);
})(this, index);
});
.visible {
opacity: 1;
transition: all 500ms ease;
}
div {
opacity: 0;
color: blue;
}
.loaded {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
您可以使用侦听器 'transitionend' 或 'animationend'、
When using the css transition use transitionend, and when using
@keyframes/animation, use animationend.
根据
$('.loaded').each(function(index) {
(function(that, i) {
that.addEventListener('transitionend', function(e) {$(that).removeClass("loaded"); });
var t = setTimeout(function() {
$(that).addClass("visible");
}, 200 * i);
})(this, index);
});
我有所有 div
和 class loaded
的动画序列。
目标是将 class visible
添加到这些 div
(这是一个 css 不透明动画),然后删除 class loaded
一旦动画是 completed/finished.
$('.loaded').each(function(index) {
(function(that, i) {
var t = setTimeout(function() {
$(that).addClass("visible");
}, 200 * i);
})(this, index);
});
感谢您的帮助!
您可以为 transitionend
or animationend
events with jQuery .on()
附加事件侦听器,然后在回调
您使用哪一个取决于您处理动画的方式:
animationend
对于@keyframes/animation
transitionend
对于transition
$('.loaded').each(function(index) {
(function(that, i) {
setTimeout(function() {
$(that).addClass("visible");
$(that).on('transitionend', () => {
$(that).removeClass('loaded')
});
}, 200 * i);
})(this, index);
});
.visible {
opacity: 1;
transition: all 500ms ease;
}
div {
opacity: 0;
color: blue;
}
.loaded {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
您可以使用侦听器 'transitionend' 或 'animationend'、
When using the css transition use transitionend, and when using @keyframes/animation, use animationend.
根据
$('.loaded').each(function(index) {
(function(that, i) {
that.addEventListener('transitionend', function(e) {$(that).removeClass("loaded"); });
var t = setTimeout(function() {
$(that).addClass("visible");
}, 200 * i);
})(this, index);
});