我想做这样的东西。
CSS库animate.CSS
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
HTML
<div class="animatedScroll animate__animated animate__fadeInUp" style="animation-delay: 0.3s;"><p>111</p></div>
<div class="animatedScroll"><p>222</p></div>
jQuery
$(function(){
var element = $('.animatedScroll');
$.each(element, function(i){
let ele = $(this);
var hasAnimation = false;
var name = '';
$(this).on('animationstart', function(e){
// If the element has an animation and it's start running
hasAnimation = true;
name = e.originalEvent.animationName;
});
if ( hasAnimation === true ) {
console.log('animation name is : ' + name);
}
else {
console.log('no animation');
}
});
})
我希望控制台日志是动画名称是:fadeinup和no animation。
但结果是两个元素都没有动画。
据我所知，这是因为事件animationstart启动得晚了。
有没有其他方法可以达到同样的目的？ 这可以用延迟对象来解决吗？
我稍微整理了一下ypur代码。 在定义“AnimationStart”事件的操作之后，动画的console.log()立即执行。 那是在实际动画开始之前的很长时间。 所以结果总是:“没有动画”。 按照@Ikik的建议，我现在引入了一个“报告功能”，它为您提供关于系统当前状态的报告。 我在动画之前和之后分别触发一次报告（在事件函数内部）。
我更改的另一件事是，我通过使用DOM元素的data属性将动画信息直接与DOM元素关联。 这些属性可以通过.dataset属性从JavaScript访问。
null
var as=$('.animatedScroll');
as.each(function(i,ele){
ele.hasAnimation=false;
ele.name='';
$(ele).on('animationstart', function(e){
// If the element has an animation and it's start running
ele.dataset.hasAnimation=true;
ele.dataset.name = e.originalEvent.animationName;
animationReport(as); // report after animation
});
});
animationReport(as); // report before animation
function animationReport(sel){ // reports the most recent animation for each
sel.each(function(i,ele){ // DOM element found in the given jQuery object sel
console.log(ele.textContent+' has '+(ele.dataset.name||'no animation'))
})
}
$('button').click(function(){animationReport(as)});@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animatedScroll animate__animated animate__fadeInUp" style="animation-delay: 0.3s;"><p>111</p></div>
<div class="animatedScroll"><p>222</p></div>
<button> report again </button>