javascript - 检查元素是否有 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 和没有动画。

但结果是两个元素都没有动画。

据我所知，这是因为事件 animationstart 延迟触发。

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

Answer 1

我稍微整理了一下 ypur 代码。在为“animationstart”事件定义操作后，您的动画 console.log() 立即执行。那是在实际动画开始之前。因此结果总是:“没有动画”。按照@Ikik 的建议，我现在引入了一个“报告功能”，可以为您提供有关系统当前状态的报告。我在动画之前和之后触发一次报告(在事件函数内)。

我更改的另一件事是，我使用 data 属性将动画信息直接与 DOM 元素相关联。可以通过 .dataset 属性从 JavaScript 访问这些属性。

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>