vue购物车动画效果
使用动画的三个函数
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
将动画函数easy改成贝塞尔曲线的
效果：
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
html,body{margin:0;padding:0}
body{
position:fixed;
width:100%;
height:100%
}
#app,#app>div{
width:100%;
height:100%
}
.car{
width:100%;
height:40px;
line-height:30px;
position:absolute;
bottom:0;
border:1px solid #ddd;
display:flex;
justify-content:flex-end;
}
.car-content{
margin-right:30px;
background-color:#eee;
padding:0 8px;
display:flex;
align-items:center;
}
.compute{
position:absolute;
width:300px;
text-align:center;
height:30px;
line-height:27px;
top:0;
left:0;bottom:0;right:0;
margin:auto;
border:1px solid #ddd
}
.compute span,.compute button{
vertical-align:middle
}
.ball{
position:absolute;
top: 448px;
left: 743px;
width:17px;
height:17px;
background-color:red;
border-radius:50%;
z-index:999;
}
</style>
</head>
<body>
<div id="app">
<div>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
<div class="ball" v-if="ballFlag"></div>
</transition> <div class="compute">
<span>{{num}}</span>
<button @click="add">+</button>
<button @click="sub">-</button>
<button @click="addToshowCar" >加入购物车</button>
</div>
<div class="car">
<span class="car-content">购物车</span>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
num:0,
ballFlag:false
}
},
methods:{
add(){
this.num++
},
sub(){
if(this.num>1){
this.num--
}else{
return false
}
},
addToshowCar(){
this.ballFlag = !this.ballFlag
},
// 动画钩子函数
// 进入前状态
beforeEnter (el) {
el.style.transform = 'translate(0,0)'
},
// 进入中
enter (el, done) {
// 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
el.offsetWidth
el.style.transform = 'translate(569px,437px)'
el.style.transition = "all 2s cubic-bezier(.4,-0.3,1,.68)"
done()
},
// 进入后
afterEnter () {
this.ballFlag = !this.ballFlag
},
}
})
</script>
</html>
问题：
发现此种方法不适应于不同屏幕的分辨率，如果换了一个尺寸的小球的位置会发生变化
解决思路：
1、首先在页面进行resize的时候重新设置小球的top值left值
2、算出小球初始停下来的位置相对于页面的左边和顶部x,y getBoundingClientRect()可以获取
3、算出小球最终停下来的位置相对于页面的左边的顶部x1,y1
4、所以不管是多大的分辨率，将x1-x,y1-y算出来的结果值就是页面在动画之间移动的距离
5、将算出来的结果值放进动画进入中的translate里面
用到的知识点，使用v-if的时候会出现屏幕闪烁，可以添加v-cloak属性，然后再在样式中添加
[v-cloak] { display: none }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style type="text/css">
html,body{margin:0;padding:0}
body{
position:fixed;
width:100%;
height:100%
}
#app,#app>div{
width:100%;
height:100%
}
.car{
width:100%;
height:40px;
line-height:30px;
position:absolute;
bottom:0;
border:1px solid #ddd;
display:flex;
justify-content:flex-end;
}
.car-content{
margin-right:30px;
background-color:#eee;
padding:0 8px;
display:flex;
align-items:center;
position:relative
}
.car-content>.smallball{
position:absolute;
top:-8px;
right:-8px;
width:17px;
height:17px;
text-align:center;
color:#fff;
font-size:12px;
line-height:17px;
background-color:red;
border-radius:50%;
z-index:999;
}
.compute{
position:absolute;
width:300px;
text-align:center;
height:30px;
line-height:27px;
top:0;
left:0;bottom:0;right:0;
margin:auto;
border:1px solid #ddd
}
.compute span,.compute button{
vertical-align:middle
}
.ball{
position:absolute;
top: 294px;
left: 548px;
width:17px;
height:17px;
background-color:red;
border-radius:50%;
z-index:999;
/*transform:translate(569px,437px)*/
}
[v-cloak] { display: none }
</style>
</head>
<body>
<div id="app">
<div>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
<div class="ball" v-if="ballFlag" v-cloak ref="ball" :style="{top: `${tt}px`,left:`${ll}px`}"></div>
</transition> <div class="compute">
<button @click="sub">-</button>
<span v-cloak ref="num">{{num}}</span>
<button @click="add">+</button>
<button @click="addToshowCar" ref="btn">加入购物车</button>
</div>
<div class="car">
<div class="car-content">
购物车
<span class="smallball" id="smallball">{{carNum}}</span>
</div>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
num:0,
ballFlag:false,
tt:0,//小球因为自适应需要重新设置top值
ll:0,
carNum:0
}
},
mounted(){
this.initTopLeft()
window.addEventListener(
"resize",this.initTopLeft,false
);
},
methods:{
initTopLeft(){
let t = this.$refs.btn.getBoundingClientRect().top;
let l = this.$refs.btn.getBoundingClientRect().left;
this.tt = t
this.ll = l
},
add(){
this.num++
},
sub(){
if(this.num>1){
this.num--
}else{
return false
}
},
addToshowCar(){
this.ballFlag = !this.ballFlag
},
// 动画钩子函数
// 进入前状态
beforeEnter (el) {
el.style.transform = 'translate(0,0)'
},
// 进入中
enter (el, done) {
// 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
el.offsetWidth
//获取小球相对于页面顶部或者
const ball = this.$refs.ball.getBoundingClientRect()
//方法二：获取徽标相对于页面顶部和底部的距离，
//也可以用document.getElementById获取dom
const badgePosition = document.getElementById("smallball").getBoundingClientRect()
const xDist = badgePosition.left - ball.left
const yDist = badgePosition.top - ball.top
el.style.transform = `translate(${xDist}px,${yDist}px)`
el.style.transition = "all .5s cubic-bezier(.4,-0.3,1,.68)"
done()
},
// 进入后
afterEnter () {
this.ballFlag = !this.ballFlag
this.carNum = this.num
},
}
})
</script>
</html>
方法二：
github中看到，可以借鉴，没有使用getBoundingClientRect，代码量相对较多
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.shop {
position: fixed;
top: 300px;
left: 400px;
} .ball {
position: fixed;
left: 32px;
bottom: 22px;
z-index: 200;
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
/*贝塞尔曲线*/
} .inner {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgb(0, 160, 220);
transition: all 0.4s linear;
} .cart {
position: fixed;
bottom: 22px;
left: 32px;
width: 30px;
height: 30px;
background-color: rgb(0, 160, 220);
color: rgb(255, 255, 255);
}
</style>
</head> <body>
<div id="app">
<ul class="shop">
<li v-for="item in items">
<span>{{item.text}}</span>
<span>{{item.price}}</span>
<button @click="additem">添加</button>
</li>
</ul>
<div class="cart" style="">{{count}}</div>
<div class="ball-container">
<!--小球-->
<div v-for="ball in balls">
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {
count: 0,
items: [{
text: "苹果",
price: 15
},
{
text: "香蕉",
price: 15
}
],
balls: [ //小球 设为3个
{
show: false
},
{
show: false
},
{
show: false
},
],
dropBalls: [],
},
methods: {
additem(event) {
this.drop(event.target);
this.count++;
},
drop(el) { //抛物
for(let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if(!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) { /* 购物车小球动画实现 */
let count = this.balls.length;
while(count--) {
let ball = this.balls[count];
if(ball.show) {
let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22); //获取y
el.style.display = '';
el.style.webkitTransform = 'translateY(' + y + 'px)'; //translateY
el.style.transform = 'translateY(' + y + 'px)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translateX(' + x + 'px)';
inner.style.transform = 'translateX(' + x + 'px)';
}
}
},
dropping(el, done) { /*重置小球数量 样式重置*/
let rf = el.offsetHeight;
el.style.webkitTransform = 'translate3d(0,0,0)';
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
el.addEventListener('transitionend', done);
},
afterDrop(el) { /*初始化小球*/
let ball = this.dropBalls.shift();
if(ball) {
ball.show = false;
el.style.display = 'none';
}
}
}
})
</script>
</body> </html>
效果图
vue购物车动画效果的更多相关文章
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- 【转】Android 实现蘑菇街购物车动画效果
原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路 目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...
- Android 实现蘑菇街购物车动画效果
版本号:1.0 日期:2014.8.6 版权:© 2014 kince 转载注明出处 使用过蘑菇街的用户基本上都知道有一个增加购物车的动画效果,此处不详细描写叙述想知道的能够去下载体验一下. 1 ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery模拟实现天猫购物车动画效果
测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
- router使用以及vue的动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- jquery商城购物车右侧悬浮加入购物车动画效果
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
随机推荐
- nginx限制流量
location /download/ { limit_rate_after 5m; limit_rate 1m; alias /data/html/; }
- Javascript——概述 && 继承 && 复用 && 私有成员 && 构造函数
原文链接:A re-introduction to JavaScript (JS tutorial) Why a re-introduction? Because JavaScript is noto ...
- Access-Control-Max-Age是什么？
Access-Control-Max-Age是什么 答: 浏览器的同源策略,就是出于安全考虑,浏览器会限制从脚本发起的跨域HTTP请求(比如异步请求GET, POST, PUT, DELETE, ...
- iOS-UITabbar自定义
[self createCustomTabBar]; -(void)createCustomTabBar{ //创建一个UIImageView,作为底图 UIImageView *bgVi ...
- 2019强网杯部分misc&web
0x01 前言 前两天菜鸡+x和几个大哥算是正式参加了一次ctf的线上赛,也是第一次参加这种比赛(前一段时间巨佬也给了我们一个西班牙的比赛,不过不算是正式参赛,做题的时候,比赛已经结束了),没想到出师 ...
- 【C/C++开发】ffplay中的FrameQueue的自我理解
最近在研究ffplay,以下是本人今天在研究FrameQueue的时候整理的笔记,如有错误还请有心人指出来~ //这个队列是一个循环队列,windex是指其中的首元素,rindex是指其中的尾部元素. ...
- linux 安装了Linux generic mysql 出错
在一次安装 Linux generic cmake 出错 提示:CMake Error: The source directory "/usr/local/src" does no ...
- tab页签
<div class="fl" id="newsBox"> <div class="tab1 grayBar"> & ...
- python_网络编程_基础
基本的架构有C/S架构 和B/S架构 B/S架构优于C/S架构? 因为统一入口 , 都是从浏览器开始访问 两台电脑实现通信, 需要网卡, 网卡上有全球唯一的mac地址 ARP协议 #通过ip地址就能找 ...
- Mac10.14.6安装并破解PyCharm
之前安装了PyCharm的Community版本, 用了半天之后发现好多功能都没有, 于是准备安装专业版然后破解. 安装包直接去官网下载, 不多说. 破解补丁的下载地址如下: 链接:https://p ...