How to realize the ripple effect of adding water by Vue

This article mainly explains "how to add water ripple effect in Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue how to achieve water ripple effect" bar!

The role of custom instruction

In a nutshell, it is to operate the underlying dom.

Of course, vue itself has a very powerful instruction function to perform dom operations for you, such as whether the v-on binding event is correct. This should be a familiar instruction. After all, js is an event-driven language. And you can go to the official documents and have a look.

Realization principle of water ripple

When we click, the mouse will diverge a circle, whether there is a click event triggered, at this time we will add a span tag, of course, to set his width and height, and other attributes, and we observe that the color of the circle is slowly not available, so there are opacity attributes, and span is not moving with the mouse, so there are also add positioning attributes.

Core

Notice that the span divergent circle is getting bigger and bigger, so the width and height are constantly changing. If we change, we can think of the timer, in which we can control the width and height of the circle, so that the properties of the span change constantly change regularly. Of course, there must be a critical value. We can take a look at the following figure.

We can look at the demand, water ripple, must be to cover the entire button, then the divergence radius of span must be the maximum distance in the button, as shown in the picture, the diagonal must be the longest side, clear at a glance. How to find it, there is a way to find Math.sqrt (a*a+b*b) in the constructor Math, so the width and height of span is twice the longest distance. So when the threshold is found, the timer is cleared when the threshold is reached, so that the properties of the span are not changing. And delete the span.

Code implementation

Above we analyzed the analysis, and then we implemented it in code.

Structure:

{{title}} I diverge water ripples

Instantiate a vue object.

Const vm = new Vue ({data: {title: "Custom specified settings water ripple"}}) .$ mount (".app")

Custom instruction

Vue.directive (variable data carried by the 'shuibowen', {/ / binding instruction inserted: function (el, binding) {el.addEventListener (' click') Function (e) {let x = e.clientX-el.offsetLeft let y = e.clientY-el.offsetTop / / add a span tag let span = document.createElement ("span") span.style.position = "absolute" span in the mouse position .style.background = binding.value | | 'rgba (150 91, 91, .5) 'span.style.opacity = 1 Span.style.borderRadius ='50% 'el.append (span) let width = 0 let height = 0 let opacity = 1 let max_length = Math.sqrt (el.offsetWidth * el.offsetWidth + el.offsetHeight * el.offsetHeight) * 2 Let time = setInterval (() = > {width + = 5 height + = 5 opacity-= 0.01 / / judge when the maximum value is exceeded Clear timing and delete span if (width < max_length) {span.style.width = width + 'px' span.style.height = height +' px' span.style.opacity = opacity Span.style.left = x-span.offsetWidth / 2 + 'px' span.style.top = y-span.offsetHeight / 2 +' px'} else {clearInterval (time) time = null Span.remove ()}, 10)})) at this point, I believe you have a deeper understanding of "how to add water ripple effect in Vue". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!