css 第一个动画结束后动画消失

Question

我有一个按钮，当我点击它时，它会制作一个图像向上移动的动画。

每次我点击按钮，它应该添加另一个向上移动的图像。

问题是：如果我多次点击按钮，第一个完成，但所有其他图像在到达该点之前就消失了。

css

.zoom{
    position: fixed;
    top: 50%;
    right: 1%;
    width: 5%;
    height: 5%;
    opacity: 0;
    animation: zoom 2s ease forwards;
    z-index: 2;

}

@keyframes zoom{
    0%{opacity: 0}
    50%{opacity: 1}
    100%{opacity: 0; top: 1%;}
}

html

<head>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>

<body>
          <div class="col-lg-4 item-info">

             <div class="card" style="background-color: #05008F">
                <img class="thumbnail" src="image.png" width="640" height="360">
             </div>

             <div class="box-element">
                <button>Image Up</button>
             </div>

          </div>

    <script type="text/javascript">
       $("button").on("click", function() {
           $(this).closest(".item-info")
               .find("img")
               .clone()
               .addClass("zoom")
               .appendTo("body");
           setTimeout(function(){
               $(".zoom").remove();
           }, 2000);
       });
    </script>
</body>

动画来源于此tutorial

点击按钮超过 1 次，应该会显示超过 1 张图片。

问题是：

当我在2秒内多次点击时，图像显示，但是当从第一次点击开始2秒后，所有图像都消失了。

Answer 1

$("button").on("click", function() {
       
           $(this).closest(".item-info")
               .find("img")
               .clone()
               .addClass("zoom")
               .appendTo("body");
           if(!$('.zoom').get(0) )
           setTimeout(function(){
               $(".zoom").remove();
           }, 2000);
       });

这样试一下，看看是否一切正常:)

Answer 2

问题是在超时时所有 .zoom 图像都被删除。

此代码段 'remembers' 每次超时都将删除哪个 img。

在实际情况下，重要的是在不再需要时删除这些图像，否则您最终可能运行下架。

<head>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
  <style>
    .zoom {
      position: fixed;
      top: 50%;
      right: 1%;
      width: 5%;
      height: 5%;
      opacity: 0;
      animation: zoom 2s ease forwards;
      z-index: 2;
    }
    
    @keyframes zoom {
      0% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      100% {
        opacity: 0;
        top: 1%;
      }
    }
  </style>
</head>

<body>
  <div class="col-lg-4 item-info">

    <div class="card" style="background-color: #05008F">
      <img class="thumbnail" src="https://picsum.photos/id/1084/640/360?grayscale" width="640" height="360">
    </div>

    <div class="box-element">
      <button>Image Up</button>
    </div>

  </div>

  <script type="text/javascript">
    $("button").on("click", function() {
      const thisImg = $(this).closest(".item-info")
        .find("img")
        .clone();
      thisImg.addClass("zoom")
        .appendTo("body");
      setTimeout(function() {
        thisImg.remove();
      }, 2000);
    });
  </script>
</body>

css 第一个动画结束后动画消失

css animation disappeared when the first one was finished

html

css

jquery

css-animations