How to restart css transitions with "touchstart" and "touchend"?

Question

I have a simple div that simulates the ripple effect of material design along with "touchstart" and "touchend" events. But I don't know how to restart the animation if the user clicks several times.

      .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);
          });
        });

How to make the transition repeat each time the user clicks?

Answer 1

嗯，到目前为止我所看到的他们没有特殊的代码，只需编写您的代码从动画中添加一个调用函数即可启动，因此当用户再次单击时，它肯定会自动重新启动