如何刪除元素（加載頁面+css animation 100%）？

Question

如果@keyframes 100%，我怎么能告訴 p js 和 jQuery ？？？

如果元素的@keyframes == 100%，做一些特定的事情

我的問題是頁面上有一個元素，我想在頁面加載時刪除該元素，如果 animation 在 CSS 中完成

這意味着我不希望他在頁面加載時刪除元素。 我只想在頁面完成后刪除元素 + animation 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();
});
})

但它沒有用）：

Answer 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>

Answer 2

上面的代碼段不起作用的原因是因為您將animation-iteration-count設置為infinite時沒有調用您的animationend偵聽器，這告訴瀏覽器 animation 永遠不會結束。

您可以使用兩個技巧來解決此問題，

1.從迭代計數中去掉infinite並將其設置為1 ，然后你的代碼片段就可以工作了

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

2.如果您使用某種無限加載器，您可以使用計時器，因為您的 animation 持續時間為1s ，您可以創建一個 setTimeout 回調，檢查頁面是否已完全加載。

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

Answer 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();

}); })

希望這有效！