Ripple button with VueJS

Ripple button with VueJS

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

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

Vuestic Admin

Set Up a Vue.js Development Environment

vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue js Axios Tutorial

Vue js Axios Tutorial. We will see Vue axios post request, Vue js headers and Vue js get request. We will use Node.js as backend platform.

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Why Vue CLI? - Vue.js

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities. If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.