Блог

Главная - Вопросы по программированию - css-анимация исчезла, когда была закончена первая

css-анимация исчезла, когда была закончена первая

#html #jquery #css #css-animations

Вопрос:

У меня есть кнопка, которая, когда я нажимаю на нее, создает анимацию для перемещения изображения вверх.

Каждый раз, когда я нажимаю на кнопку, она должна добавлять другое изображение, которое перемещается вверх.

Проблема в следующем: если я нажал на кнопку более одного раза, первое изображение завершается, но все остальные изображения просто исчезают, не достигнув точки.

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>

Анимация взята из этого урока

при нажатии на кнопку более 1 раза должно появиться более 1 изображения.

Проблема в том, что:

Когда я нажимаю много раз в течение 2 секунд, изображения отображаются, но когда с первого щелчка проходит 2 секунды, все изображения исчезают.

Ответ №1:

Проблема в том, что по истечении времени ожидания все изображения .zoom удаляются.

Этот фрагмент «запоминает», какой 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. Все еще не работает, я нажимаю на него, затем нажимаю еще раз, второй не отображается.

2. Я хочу иметь возможность показывать более 1 одновременно.

3. проверьте это еще раз после редактирования

4. Проблема в том, что если вы сделаете непрозрачность 1 на 100%, вы увидите, что она останется там. Но в любом случае это хорошо, теперь они не исчезают одновременно.

5. Это решение может работать визуально, но вам нужно удалить изображение, как только оно больше не понадобится, как это было в оригинале (хотя оно удалило слишком много сразу).

Метки: ,