Ripple button with VueJS

Just a simple retro'ish ripple button with few Javascript (VueJS) codes for events and some sort of controls.

I tried to re-design the animation, and the movement of the pen that I did before. I tried to improve it, but I think, it still needs an improvement. I still have to study more, and redo it.

---

How it works

Placing of a ripple

With the source code below, we can put the location of a ripple.

// Get the exact location of the button from the screen.
let pos = el.getBoundingClientRect();

// 'this.ripples' is a looped variable for the ripples element.
this.ripples.push({
    x: e.clientX - pos.left,
    y: e.clientY - pos.top
});

Expansion of a ripple

The expansion of a ripple is made in CSS animation.

.ripple {
    background-color: #ff1ead;
    width: 1rem;
    height: 1rem;
    position: absolute;
    border-radius: 50%;
    /* After we placed the ripple, this code below will put the ripple element at the center of the clicked area */
    transform: translateX(-100%) translateY(-100%);
    mix-blend-mode: screen;
    animation: ripple 1000ms ease-out forwards;
}

/* From original position, we are going to scale the element to 1rem * 50. It is somehow enormous, and it will occupy the whole space of the button, and then, set the opacity to 0. */
@keyframes ripple {
    0%   { transform: translate(-100%, -100%); }
    80%  { transform: translate(-100%, -100%) scale(50); }
    100% { transform: translate(-100%, -100%) scale(50); opacity: 0; }
}

After animation

After the animation, we have to destroy the element, so that our element will not be flooded by a ripple element.

// You will notice the code below at the template of the component.
// v-on:animationend="rippleEnd(i)"
// It is an 'onanimationend' event that will be triggered after the CSS animation was ended.

// Yes, I simply spliced the element from the ripples array.
rippleEnd: function(i) {
    this.ripples.splice(i, 1);
}

• About onanimationend.

---

Suggestions

This behaviour is not yet perfect. Especially, when the animation was ended, you can't put any ripples after a second (The exact animation time). I don't know if this is a bug, or there is something I did not do well. So if some of you got a suggestion, please comment down below. Very much appreciated.

Thank you!