ripple effect with transition

i'm trying to create simple ripple effect. When i add classes to element newClick i expected ripple effect. Got troblued because appending class is instantly and i dont see the effect. Could you help me?

const button = document.querySelector('.button');

const handleClick = (e) => {
    const newClick = document.createElement('div');
    newClick.classList.add('point');

    newClick.style.top = `${e.offsetY}px`;
    newClick.style.left = `${e.offsetX}px`;

    newClick.classList.add('active');
    button.appendChild(newClick);
};

button.addEventListener('click', handleClick);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;
    background-color: #000;
}

.button {
    position: relative;
    background-color: #7c1a76;
    border: none;
    padding: 1em 2em;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
}

.point {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 1;
    background-color: #fff;
    transform: scale(1);
    transition: transform 0.5s, opacity 0.5s;
}

.active {
    transform: scale(10);
    background-color: #fff;
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Button Ripple Effect</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <button class="button">click me</button>

        <script src="script.js"></script>
    </body>
</html>

I spend few hours on this trouble. Why i dont see effect of transition? This is project from tutorial but i want do it on my way.

Solution

It doesn't work because you add element to button after adding class.

To solve this problem, you must have clickContainer in button because your code create newClick element on every click event. ok?

like this

<button>
  click me
  <div class='clickContainer'/>
</button>

And then, follow steps below.

-create newClick element

-empty clickContainer

-append newClick element to clickContainer

-add class to newClick

Then it'll works.

And you used transition.

I think it's not suitable for this problem because after circle getting bigger, it's opacity is 0 but it keep it's size.

And also, you used 2 classes for this.

It's not good.

So I think it's easy and suitable to use animation .

I add codes below.

-script

const button = document.querySelector(".button");
const handleClick = (e) => {
  if (e.target.id !== "button") return;
  const clickContainer = document.querySelector("#clickContainer");
  clickContainer.innerHTML = "";
  const newClick = document.createElement("div");
  clickContainer.appendChild(newClick);
  newClick.classList.add("point");
  newClick.style.top = `${e.offsetY}px`;
  newClick.style.left = `${e.offsetX}px`;
};

-css

  .point {
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background-color: #fff;
    animation-name: ripple;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
  }

  @keyframes ripple {
    0% {
      width: 5px;
      height: 5px;
      opacity: 1;
      transform: scale(1);
    }
    100% {
      width: 5px;
      height: 5px;
      transform: scale(20);
      opacity: 0;
    }
  }