Vue之实现加入购物车的过渡效果
模板代码
这个是vue项目的一部分,这里的图标库来源于cube-ui
<i @click="toCart($event)" class="cubeic-add"></i>
...
<!-- 加入购物车动画(小球) -->
<div class="ball-box">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-if="ball.show">
<div class="inner">
<i class="cubeic-add"></i>
</div>
</div>
</transition>
</div>
data数据
ball: {
show: false, //是否显示小球
el: "" //获取小球的dom
},
methods方法
// 添加到购物车
toCart(event) {
// 显示小球
this.ball.show = true;
// 获取点击元素
this.ball.el = event.target;
}
//小球动画
beforeEnter(el) {
// 让小球移动到点击的位置,获取点击位置
let dom = this.ball.el;
let rect = dom.getBoundingClientRect(); // 获取点击dom位置
let x = rect.left - innerWidth * 0.62;
let y = -(innerHeight - rect.top);
el.style.display = "block";
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.querySelector(".inner");
inner.style.transform = `translate3d(${x}px,0,0)`;
},
enter(el, done) {
// 触发重绘
document.body.offsetHeight;
// 小球回家
el.style.transform = `translate3d(0,0,0)`;
let inner = el.querySelector(".inner");
inner.style.transform = `translate3d(0,0,0)`;
// 过渡完成后执行的事件
el.addEventListener("transitionend", done);
},
afterEnter(el) {
// 隐藏小球
this.ball.show = false;
el.style.display = "none";
},
css代码(注意格式)
// 小球动画
.ball-box {
.ball {
position: fixed;
bottom: 0;
left: 62%;
z-index: 2;
color: #f00;
transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner {
transition: all 1s linear;
}
}
}
效果演示
转载自:https://juejin.cn/post/7041769481768534023