预备基础
整体思路
定义商品列表，设置点击的元素(点击后触发加入购物车的函数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)
}
}
}
参考
好了，本文写到这里就结束了，有问题欢迎留言和拍砖哦
![html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫](http://pic.xiahunao.cn/html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫)
.,HTML及网页制作练习题-完整版)
《计算机网络基础》在线作业资料答案3...)
