如何删除元素（加载页面+css动画100%）？答案

【问题标题】：How to delete the element (loading page + css animation 100%)?如何删除元素（加载页面+css动画100%）？
【发布时间】：2021-03-25 08:28:04
【问题描述】：

如何区分 p js 和 jQuery 如果@keyframes 100% ???

如果元素的@keyframes == 100%，则执行特定操作

我的问题是页面上有一个元素，我想在页面加载时删除该元素，如果动画是在 CSS 中完成的

意思是我不希望他在页面加载时删除元素。我只想在页面完成时删除元素+动画100%

元素是跨度（load-span）

HTML：

 <a href="#">
 <div class="back-move">
     <span class="load-span"></span>
     <div class="play-move"><span></span></div>
 </div>
 <p>GG img</p>

CSS：

    .load-span {
    position: absolute;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    width:40px;
    height: 100%;
    top: -50%;
    left: 100%;
    animation: load-span 1s;
    animation-iteration-count: infinite;
    transform: translate(15px, 0px) skewX(35deg);
}

@keyframes load-span {
    100%{ top: 100%;left: -100%;}
}

我也试过了：

$(window).on("load", function () {
 $('.load-span').on("animationend", function(){
    $(this).remove();
});
})

但它不起作用）：

【问题讨论】：

标签： javascript html jquery css animation

【解决方案1】：

您可以简单地删除animation-iteration-count: infinite;，下面的代码就可以工作了。

$(window).on("load", function () {
 $('.load-span').on("animationend", function(){
console.log('fdfdf');
    $(this).remove();
});
})

.load-span {
    position: absolute;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    width:40px;
    height: 100%;
    top: -50%;
    left: 100%;
    animation: load-span 1s;
   
    transform: translate(15px, 0px) skewX(35deg);
}

@keyframes load-span {
    100%{ top: 100%;left: -100%;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
 <div class="back-move">
     <span class="load-span"></span>
     <div class="play-move"><span></span></div>
 </div>
 <p>GG img</p>

【讨论】：

【解决方案2】：

您上面的 sn-p 不起作用的原因是您的 animationend 侦听器没有被调用，因为您将 animation-iteration-count 设置为 infinite，这告诉浏览器动画永远不会结束。

有两个技巧可以解决这个问题，

1.从迭代计数中去掉infinite并将其设置为1，然后你的代码sn-p就可以工作了

$(window).on("load", function () {
    $('.load-span').on("animationend", function(){
        $(this).remove();
    });
})

2.如果您使用某种无限加载器，您可以使用计时器，因为您的动画持续时间是1s，您可以创建一个 setTimeout 回调，检查页面是否已完全加载。

setTimeout(function(){
  // Check whether page has loaded or not
}, 1000);

【讨论】：

【解决方案3】：

你很接近这个。所以不要这样：

$(window).on("load", function () {
  $('.load-span').on("animationend", function(){
  $(this).remove();

}); })

你可以试试这个： 将 webkitAnimationEnd 与 animationend

一起使用

    $(window).on("load", function () {
  $('.load-span').on("animationend webkitAnimationEnd", function(){
  $(this).remove();

}); })

希望这行得通！

【讨论】：