专门做旅游攻略的网站,网页游戏知乎,怎样建个小公司的网站,阿里巴巴做特卖的网站预备基础整体思路定义商品列表#xff0c;设置点击的元素(点击后触发加入购物车的函数addToShopCart)注#xff1a;这里要把$event传递过去#xff0c;方便得到target定义一个component用来放购物车和运动的小球定义一个component用来放运动的小球#xff0c;里面包含多个b…预备基础整体思路定义商品列表设置点击的元素(点击后触发加入购物车的函数addToShopCart)注这里要把$event传递过去方便得到target定义一个component用来放购物车和运动的小球定义一个component用来放运动的小球里面包含多个ball并且要在这里定义ball的运动函数方便前面的点击调用实践设置点击的元素点击添加定义点击的函数调用父组件的添加的方法(最终是调用购物车的drop)// list.vueexport default {methods: {addToShopCart (event, item) {// 通知后台回调成功后执行下面的函数this.$emit(add-to-cart, event.target)}}}定义一个component用来放购物车和运动的小球车定义drop方法调用小球的drop并给调用购物车组件的用// shop-cart.vueimport ShopCartBalls form shop-cart-balls.vueexport default {methods: {drop (target) {this.$refs.ball.drop(target)}}}定义运动的小球(引入到购物车的组件)定义小球的动画函数//shop-cart-balls.vueexport 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 trueball.el targetthis.dropBalls.push(ball)return}}},beforeEnter (el) {let count this.balls.lengthwhile (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 // 清空displayel.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 // 触发重绘htmlthis.$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 falseel.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.vueimport ShopCart from shop-cart.vueexport default {components: {CommonityList,ShopCart}methods: {addToCart (target) {this.$refs.cart.drop(target)}}}参考好了本文写到这里就结束了有问题欢迎留言和拍砖哦
