Блог

У меня есть простой div, который имитирует волновой эффект material design вместе с событиями «touchstart» и «touchend». Но я не знаю, как перезапустить анимацию, если пользователь нажимает несколько раз.

       .test-ripple{
    position: relative;
    display: flex;
    align-items: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
   
  }
     .test-ripple:before {
        display: none;
      }
      .test-ripple:after {
        position: absolute;
        content: "";
        cursor: pointer;
        background-image: none;
        background-color: rgba(0, 0, 0, 0);
        width: 78%;
        height: 78%;
        border-radius: 50%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        transform: scale(0.3);
        transition: linear 350ms forwards;
      }

      .test-ripple.ativo:after {
        background-color: rgba(0, 0, 0, 0.2);
        transform: scale(1);
        transition: 150ms;
      }
      .test-ripple.fade-out:after {
        background-color: rgba(0, 0, 0, 0);
        transition: 300ms;
      }

 
<div class="test-ripple">
    <i class="material-icons">add</i>
</div >

var ripple = document.querySelectorAll(".test-ripple")

        ripple.forEach((item) => {
          item.addEventListener("touchstart", () => {
            item.classList.add("ativo");

          });

          item.addEventListener("touchend", () => {
            setTimeout(function () {
              item.classList.add("fade-out");
              setTimeout(function () {
                item.classList.remove("ativo");
                item.classList.remove("fade-out");
              }, 150);
            }, 100);
          });
        });
  

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

Хммм, с тем, что я видел до сих пор, у них нет специального кода для этого, просто напишите свой код, добавьте только одну функцию вызова из анимации для запуска, поэтому, когда пользователь снова нажмет, он обязательно перезапустится автоматически