第一个完成后css动画消失了答案

【问题标题】：css animation disappeared when the first one was finished第一个完成后css动画消失了
【发布时间】：2021-11-27 04:41:36
【问题描述】：

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

每次我单击按钮时，它都会添加另一个向上移动的图像。

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

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 秒过去后，所有图像都会消失。

【问题讨论】：

标签： html jquery css css-animations

【解决方案1】：

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

这个 sn-p '记住'在每次超时时要删除哪个 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>

【讨论】：

【解决方案2】：

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

试试这个方法，看看是否一切正常:)

【讨论】：

还是不行，点一下，再点一下，第二个没出现。
我希望能够同时显示超过 1 个。
编辑后再次查看
这个问题，如果你将不透明度 1 设置为 100%，你会看到它停留在那里。但无论如何这很好，现在它们不会同时消失。
这个解决方案可以直观地工作，但是一旦不再像原来那样需要它，您确实需要删除 img（尽管它一次删除了太多）。