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.
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
});
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 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);
}
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!
☞ How to Get Query String Parameters in Vue.js
☞ Set Up a Vue.js Development Environment
#vue-js