如何删除元素（加载页面+css animation 100%）？

Question

How can I tell p js and jQuery if @keyframes 100%???

If @keyframes for the element == 100%, do something specific

My problem is I have an element on the page,, I want to delete the element when the page loads, and if the animation is done in CSS

Meaning I do not want him to delete the element when the page loads. I just want to delete the element when the page is complete + animation 100%

The element is span (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%;}
}

Also I have tried:

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

But it didn't work ):

Answer 1

You can simply remove the animation-iteration-count: infinite; and this below code will work.

 $(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

The reason your above snippet doesn't work is because your animationend listener is not being called as you've set the animation-iteration-count to infinite , which tells the browser that the animation is never ending.

There are two tricks you can use to solve this,

1.Get rid of infinite from the iteration count and set it to 1 , then your code snippet would work

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

2.If you're using some sort of inifinite loader, you could use a timer, as your animation duration is 1s , you can create a setTimeout callback, that checks whether the page has fully loaded or not.

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

Answer 3

You were close with this. So instead of this:

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

}); })

You can try this: Use webkitAnimationEnd along with animationend

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

}); })

Hope this works!