html加入购物车的动画,vue实现加入购物车动画

预备基础

整体思路

定义商品列表，设置点击的元素(点击后触发加入购物车的函数addToShopCart)注：这里要把$event传递过去，方便得到target

定义一个component用来放购物车和运动的小球

定义一个component用来放运动的小球，里面包含多个ball，并且要在这里定义ball的运动函数方便前面的点击调用

实践

设置点击的元素

• 点击添加

定义点击的函数，调用父组件的添加的方法(最终是调用购物车的drop)

// list.vue

export default {

methods: {

addToShopCart (event, item) {

// 通知后台，回调成功后执行下面的函数

this.$emit('add-to-cart', event.target)

}

}

}

定义一个component用来放购物车和运动的小球

车

定义drop方法，调用小球的drop，并给调用购物车组件的用

// shop-cart.vue

@import ShopCartBalls form 'shop-cart-balls.vue'

export default {

methods: {

drop (target) {

this.$refs.ball.drop(target)

}

}

}

定义运动的小球(引入到购物车的组件)

定义小球的动画函数

//shop-cart-balls.vue

export default {

data () {

return {

balls: [

{show: false},

{show: false},

{show: false}

]

},

dropBalls: []

},

methods: {

drop (target) {

for (var i = 0; i < this.balls.length; i++) {

var ball = balls[i]

if (!ball.show) {

ball.show = true

ball.el = target

this.dropBalls.push(ball)

return

}

}

},

beforeEnter (el) {

let count = this.balls.length

while (count--) {

let ball = this.balls[count]

if (ball.show) {

let rect = ball.el.getBoundingClientRect() // 获取小球的相对于视口的位移(小球高度)

let x = -(window.innerWidth - rect.left - 126)

let y = rect.top - 90 // 负数是从左上角往下的的方向, 正数是往上

el.style.display = '' // 清空display

el.style.webkitTransform = `translate3d(0, ${y}px, 0)`

el.style.transform = `translate3d(0, ${y}px, 0)`

// 处理内层动画

let inner = el.getElementsByClassName('inner-hook')[0] // 使用inner-hook类来单纯被js操作

inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`

inner.style.transform = `translate3d(${x}px, 0, 0)`

}

}

},

enter (el, done) {

/* eslint-disable no-unused-vars */

let rf = el.offsetHeight // 触发重绘html

this.$nextTick(() => {

// 让动画效果异步执行,提高性能

el.style.webkitTransform = 'translate3d(0, 0, 0)'

el.style.transform = 'translate3d(0, 0, 0)'

// 处理内层动画

let inner = el.getElementsByClassName('inner-hook')[0] // 使用inner-hook类来单纯被js操作

inner.style.webkitTransform = 'translate3d(0, 0, 0)'

inner.style.transform = 'translate3d(0, 0, 0)'

el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。

})

},

afterEnter (el) {

let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球

if (ball) {

ball.show = false

el.style.display = 'none' // 隐藏小球

}

}

}

}

css里面定义小球的样式和贝塞尔曲线

/* shop-cart-balls.vue */

.ball-container {

.ball {

&.v-enter-active {

/* 可以在上面的工具里跳出自己想要的曲线，调整参数 */

transition: all .6s cubic-bezier(0.11, 0.92, 0.98, 0.75);

}

.inner {

width: 16px;

height: 16px;

border-radius: 50%;

background: #f00;

transition: all .6s linear;

}

}

}

在list的父组件里面引入列表和购物车组件

定义addToCart函数，调用购物车的drop方法

import CommonityList from 'list.vue'

import ShopCart from 'shop-cart.vue'

export default {

components: {

CommonityList,

ShopCart

}，

methods: {

addToCart (target) {

this.$refs.cart.drop(target)

}

}

}

参考

好了，本文写到这里就结束了，有问题欢迎留言和拍砖哦