vue动画-实现购物车的动态添加动画

需求分析：进入产品列表，点击缩略图旁+号，有个该商品被动态添加到购物车的动画。让我们实现这个动画吧。

如下图：

通过动图可以发现移动的曲线是蜿蜒曲折的，这就用到了贝塞尔曲线。

他的弧度是这样的。

贝塞尔曲线链接

实现原理：先创建一个隐藏的圆点在购物车icon那里。当点击+号时，让圆点先移动到当前点击+的位置并让其显示。然后开始动画，让圆点移动回到原来的购物车icon位置并让其隐藏。

使用vue提供的vue动画和贝塞尔曲线来实现移动动画

vue动画详情链接

HTML

<template><div><van-nav-bartitle="图书战术"left-text="返回"left-arrow@click-left="onClickLeft"><template #right><van-icon name="cart-o" size="18" /><div class="shop_car_icon">{{ shopCarNum }}</div></template></van-nav-bar><div class="bookmall__list"><ul><li class="bookmall__item" v-for="(item, index) in testList" :key="index" @click="goBookUrl(item)"><div class="bookmall__item-left">{{ item }}</div><div class="bookmall__item-right"><h5>{{ item }} <span>{{ item }}</span></h5><p><span>分类:</span>{{ item }}<span style="margin-left: 10px;padding: 10px;" class="shopCarAdd" @click.stop="addToShopCars"><van-icon name="add" color="rgb(238, 57, 57"/></span></p><p class="bookmall__item-right-tag"><span>标签:</span>{{ item }}</p><p class="bookmall__item-right-sub2">{{ item }}</p></div></li></ul></div><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"><div class="shop_car_ball" v-show="shopCarBall"><div class="linner_ball"><van-icon name="add" color="rgb(238, 57, 57"/></div></div></transition></div>
</template>

.van-nav-bar {position: fixed;width: 100%;
}
.shop_car_icon {position: absolute;top: 10px;right: -8px;font-size: 10px;background-color: rgb(238, 57, 57);border-radius: 50%;text-align: center;color: rgb(82, 80, 80);line-height: 0;display: table-cell;vertical-align: middle;padding: 8px 2px;
}
.bookmall__list {padding-top: 40px;.bookmall__item {display: flex;padding: 10px;border-bottom: 1px a #000;.bookmall__item-left {flex: 25%;margin-right: 5px;img {width: 90px;}}.bookmall__item-right {flex: 75%;height: 130px;overflow: hidden;h5 {font-size: 16px;span {margin-left: 65px;font-weight: 400;font-size: 12px;color: rgb(107, 106, 106);}}p {font-size: 13px;}.bookmall__item-right-tag {color: rgb(119, 118, 118);}}}
}
.bookmall__item .bookmall__item-right-sub2 ::after {content: "...";position: absolute;right: 0;bottom: 0;
}.shop_car_ball {position: fixed;top: 10px;right: 12px;z-index: 9;font-size: 16px;// transition: all .25s cubic-bezier(0.49, -0.29, 0.75, 90.41);/* 贝塞尔曲线 */transition: all .25s cubic-bezier(.17, .86, .73, .14);.linner_ball {transition: all .25s linear;}
}

export default {data () {return {shopCarNum: window.localStorage.getItem('shopcarnum') || 0,shopCarBall: false,shopCarBallEl: null,ss: null,// demo测试数据testList: new Array(1,2,3,4,5)}},methods: {addToShopCars (e) {this.shopCarBallEl = e.targetthis.shopCarBall = true},// 动画开始beforeEnter (el) {// 获取元素的大小及其相对于视口的位置const dom = this.shopCarBallEl.getBoundingClientRect()const offsetX = window.innerWidth - dom.left - 16const offsetY = dom.top - 22el.style.display = ''// y轴是曲直向上的，x轴是蜿蜒的向右的el.style.transform = `translate3d(0, ${offsetY}px, 0)`const linnerBall = el.querySelector('.linner_ball')linnerBall.style.transform = `translate3d(-${offsetX}px, 0, 0)`},enter (el, done) {// 触发重绘，来实现动画的移动过程this.ss = document.body.offsetHeightel.style.transform = `translate3d(0, 0, 0)`const linnerBall = el.querySelector('.linner_ball')linnerBall.style.transform = `translate3d(0, 0, 0)`el.addEventListener('transitionend', done)},afterEnter (el) {this.shopCarBall = falseel.style.display = 'none'this.shopCarNum++}},watch: {// 监听shopCarNum属性，只考虑新增。新增时储存本地做永久化处理shopCarNum (newValue) {window.localStorage.setItem('shopcarnum', newValue)}}
}

这样我们就实现购物车的动态添加demo。

vue动画-实现购物车的动态添加动画相关推荐

Android添加item动画,RecyclerView基础篇-Item添加动画
Android_Banner.jpg 简介本节中我们介绍下给RecyclerView中的Item添加动画. 添加的动画,分为,在打开列表时有Item的展示动画,当滑动的时候没有动画和打开列表滑动时 ...
vue+ElementUI实现订单页动态添加产品效果
使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果,并自动计算总价.代码直接保存为html文档,使用浏览器打开即可查看效果. 效 ...
vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列
vue element-ui表格怎样自定义表头,动态添加表头,新增行.新增列.删除行.删除列需求描述 1.自定义表头,表头里插入输入框 2.默认初始化几行几列占位 3.新增行 4.新增列 5.右键点 ...
Android动画之为Drawable图片添加动画
一.前言在某些情况下,我们需要为图片添加动画效果,比如在用户操作之后,将图标转换成另一张图标.Android 提供了多张方案为 Drawable 添加动画.首先就是使用 AnimationDrawa ...
vue在行内标签中动态添加背景图片，还有其他样式
<div :style="{'background-image': `url(${require('./image/1.png')}) no-repeat center center` ...
Ruby‘s Adventrue游戏制作笔记（十）Unity添加动画
Ruby's Adventrue游戏制作笔记(十)Unity添加动画前言一.给食物添加动画二.给敌人添加动画三.添加玩家动画四.设置触发动画的脚本系列链接前言本文章是我学习Unity官 ...
Silverlight Blend动画设计系列二：旋转动画（RotateTransform）
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform) Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑 ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...

vue动画-实现购物车的动态添加动画

vue动画-实现购物车的动态添加动画相关推荐

最新文章

热门文章