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)
}
}
}
參考
好了，本文寫到這里就結束了，有問題歡迎留言和拍磚哦
總結
以上是生活随笔為你收集整理的html加入购物车的动画,vue实现加入购物车动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA中数字格式异常,java - J
- 下一篇： html5倒计时秒杀怎么做,vue 设