检查元素是否有jQuery附加的动画名称？

Question

我想做这样的东西。

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启动得晚了。

有没有其他方法可以达到同样的目的？ 这可以用延迟对象来解决吗？

Answer 1

我稍微整理了一下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>