Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use vue to develop ripple click special effects components", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use vue to develop ripple click special effects components.

Thinking before Development

The common way to achieve the ripple click effect is to listen to the element's mousedown event, create a ripple element inside the element, and adjust the element's transform: scale (0); to transform: scale (1);, set the size and position of the ripple element by calculating the click position, so as to achieve the effect of ripple diffusion.

I divided the component into two parts, circleRipple.vue and TouchRipple.vue each implementing different functions

CircleRipple.vue ripple diffusion module to complete the effect of ripple diffusion

TouchRipple.vue listens for events related to mouse and touch, and controls the display and location of circleRipple.

CircleRipple.vue

CircleRipple needs to complete the effect of ripple expansion, and can control its size and position from the outside, so use vue's transition animation to complete the effect, providing mergeStyle, color, opacity parameters to control its style from the outside. The implementation code is as follows.

Import {merge} from'. / utils' export default {props: {mergeStyle: {type: Object, default () {return {}}, color: {type: String, default:''}, opacity: {type: Number}}, computed: {styles () {return merge ({}), {color: this.color Opacity: this.opacity}, this.mergeStyle)}} @ import ".. / styles/import.less" Mu-circle-ripple {position: absolute; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; user-select: none; border-radius: 50%; background-color: currentColor; background-clip: padding-box; opacity: 0.1;} .mu-ripple-enter-active, .mu-ripple-leave-active {transition: transform 1s @ easeOutFunction, opacity 2s @ easeOutFunction } .mu-ripple-enter {transform: scale (0);} .mu-ripple-leave-active {opacity: 0! important;}

Vue2 has made great changes to animation. In addition to replacing instructions with components, it can also complete more complex animation effects. For more information, please see vue2 transition.

TouchRipple.vue

TouchRipple needs to control the display of circleRipple. Complete the following:

Monitor mouse and touch related events and control the display of circleRipple.

Calculate the size and location of the circleRipple by clicking on the event event object

Multiple circleRipple may appear if you click frequently

First of all, basic template + data model

Import circleRipple from'. / circleRipple' export default {props: {/ / whether to spread from the middle Setting to false diffuses centerRipple: {type: Boolean, default: true}, / / the style of the outer package style: {type: Object, default () {return {height: '100%, width:' 100%, position: 'absolute', top:' 0' Left: '0mm, overflow:' hidden'}, / / corrugated color color: {type: String, default:''}, / / corrugated transparency opacity: {type: Number}}, data () {return {nextKey: 0 / / record the key value of the next ripple element Equivalent to uuid If not set, the animation will be invalidated ripples: [] / / ripple element parameter array}}, mounted () {this.ignoreNextMouseDown = false / / prevent both touch and mouse clicks}, methods: {start (event, isRippleTouchGenerated) {/ / start ripple effect}, end () {/ / end ripple effect} HandleMouseDown (event) {/ / listen mouse click}, handleTouchStart (event) {/ / listen touchstart method}}, components: {'circle-ripple': circleRipple}}

Start and end ripple effect

To add a ripple element, you only need to add an object to the ripple. The difference is that when you need to expand from a click, you need to calculate the size and position of the ripple element.

{/ / whether isRippleTouchGenerated is the beginning of the touch event start (event, isRippleTouchGenerated) {/ / filter the situation where both touchstart and mousedown exist if (this.ignoreNextMouseDown & &! isRippleTouchGenerated) {this.ignoreNextMouseDown = false return} / / add a ripple element component this.ripples.push ({key: this.nextKey++, color: this.color, opacity: this.opacity Style: this.centerRipple? {}: this.getRippleStyle (event) / / is not extended from the center to calculate the position of the ripple element}) this.ignoreNextMouseDown = isRippleTouchGenerated}, end () {if (this.ripples.length = 0) return this.ripples.splice (0,1) / delete a ripple element this.stopListeningForScrollAbort () / / end the processing of touch scrolling}

Because vue2 is based on Virtual DOM, if there is no key to add an element and delete an element at the same time, the dom tree has not changed and will not produce animation.

Monitoring mousedown and touchstart

Mousedown and touchstart are different in processing, but both are used to activate the ripple effect. Touch involves multi-click, so we usually take *.

{handleMouseDown (event) {/ / only listen for left mouse button clicks if (event.button = 0) {this.start (event, false)}} HandleTouchStart (event) {event.stopPropagation () / / prevent multiple ripple click components from nesting if (event.touches) {this.startListeningForScrollAbort (event) / / start touchmove trigger scrolling processing this.startTime = Date.now ()} this.start (event.touches [0], true)}}

Touchmove control

When a touchMove event occurs, it is necessary to determine whether or not to move the distance and time, and then end the small ripple and click on the sister-in-law.

{/ / touchmove ends ripple control stopListeningForScrollAbort () {if (! this.handleMove) this.handleMove = this.handleTouchMove.bind (this) document.body.removeEventListener ('touchmove', this.handleMove, false)}, startListeningForScrollAbort (event) {this.firstTouchY = event.touches [0] .clientY this.firstTouchX = event.touches [0] .clientX document.body.addEventListener (' touchmove', this.handleMove, false)} HandleTouchMove (event) {const timeSinceStart = Math.abs (Date.now ()-this.startTime) if (timeSinceStart > 300) {this.stopListeningForScrollAbort () return} const deltaY = Math.abs (event.touches [0] .clientY-this.firstTouchY) const deltaX = Math.abs (event.touches [0] .clientX-this.firstTouchX) / / sliding range is > 6px end ripple click effect if (deltaY > 6 | | deltaX > 6) this.end ()}}

Calculate the position and size of the ripple

The ripple effect that needs to spread from the click, and the size and position of the ripple elements need to be calculated.

{getRippleStyle (event) {let holder = this.$refs.holder / / this method returns a rectangular object with four properties: left, top, right, and bottom. Represents the distance between each side of the element and the top and left side of the page, respectively. Let rect = holder.getBoundingClientRect () / / get the location of the click point let x = event.offsetX let y if (x! = = undefined) {y = event.offsetY} else {x = event.clientX-rect.left y = event.clientY-rect.top} / / get * * side length let max if (rect.width = rect.height) {max = rect.width * 1.412} else {max = Math.sqrt ((rect.width * rect.width) + (rect.height * rect.height))} const dim = (max * 2) + 'px' return {width: dim Height: dim, / / controls the center point of the ripple to be consistent with the click point through margin 'margin-left':-max + x +' px', 'margin-top':-max + y +' px'}

Use

Since the interior of touchRipple is a position:absolute layout, you need to add position:relative to the outside when using it.

/ / listItem.vue / /. Mu-item-wrapper {display: block; color: inherit; position: relative;} so far, I believe you have a better understanding of "how to use vue to develop ripple click special effects components". 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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.