预备基础
整体思路
- 定义商品列表，设置点击的元素（点击后触发加入购物车的函数
addToShopCart）注：这里要把$event传递过去，方便得到target - 定义一个component用来放购物车和运动的小球
- 定义一个component用来放运动的小球，里面包含多个ball，并且要在这里定义ball的运动函数方便前面的点击调用
实践
- 设置点击的元素
<!-- list.vue -->
<ul class="main">
<li class="item" v-for="(item in commonityList)" :key="item.id">
<span @click="addToShopCart($event, item)">点击添加</span>
</li>
</ul>
- 定义点击的函数，调用父组件的添加的方法（最终是调用购物车的drop）
// list.vue
export default {
methods: {
addToShopCart (event, item) {
// 通知后台，回调成功后执行下面的函数
this.$emit('add-to-cart', event.target)
}
}
}
- 定义一个component用来放购物车和运动的小球
<!-- shop-cart.vue -->
<div class="shop-cart">
<div class="cart">车</div>
<shop-cart-balls ref="ball"></shop-cart-balls>
</div>
- 定义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 -->
<div class="ball-container">
<transition-group tag="div" @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
<div class="ball" v-for="(item, index) in balls" :key="index" v-show="item.show" transition='drop'>
<div class="inner inner-hook"></inner>
</div>
</transition-group>
</div>
- 定义小球的动画函数
//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的父组件里面引入列表和购物车组件
<div class="wrap">
<commonity-list @add-to-cart="addToCart"></commonity-list>
<div class="shopcart">
<shop-cart ref="cart"></shop-cart>
</div>
</div>
- 定义
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)
}
}
}
参考
http://www.cnblogs.com/zaifeng0108/p/7226516.html
好了，本文写到这里就结束了，有问题欢迎留言和拍砖哦
