vue-transition实现加入购物车效果及其他动画效果实现
vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的过渡.加入过渡效果可以使元素的展示和隐藏更自然.
如果在vue中使用了<transition></transition>标签,vue会检测是否有应用CSS过渡动画或JavaScript钩子函数,并在适当的阶段添加添加/删除类名和调用函数执行过渡动画
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
其他的概念性文字不赘述了,大家可以去官网查看
自己写了几个小例子,效果图如下,这次的图片转换工具不行,GIF动图没弄好,大家勉强看看效果
下面贴代码
./tansitionTest.vue
文字淡入淡出效果
<template>
<div class="transition_test">
<button @click="show = !show">click</button>
// 页面有多个transition时可以加name区分,如果没有加name,默认CSS类名为v-开头
<transition name="slide-fade">
<div v-if="show" class="circle"></div>
</transition>
<div>
</div>
</template>
export default {
name: 'myTransition',
components: {
},
data() {
return {
show: false
}
},
}
<style scoped>
.transition_test {
text-align: left;
padding-bottom: 300px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aquamarine;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .5s ease-out;
}
.slide-fade-enter, .slide-fade-leave-to {
/* transform: translateX(500px); */
opacity: 0;
}
</style>
加入购物车效果
场景:点击添加按钮,商品图片展示,并移入到购物车位置,到购物车位置时隐藏商品图片
<template> <div class="shop_cart"> 加入购物车动画(css实现): <div class="add"> <button @click="addShopCart">add</button> <transition name="shop_cart"> <img class="add_img" v-if="addShow" src="../assets/voucher.png" alt=""> </transition> </div> <div class="cart"> <img src="../assets/cart.jpg" alt=""> </div> </div> </template> export default { name: 'myTransition', components: { }, data() { return { addShow: false } }, methods: { addShopCart () { this.addShow = true // 添加类名的方法没有动画结束的时机,这里我直接写了一个定时器,时机和动画时间一致,在图片移动到购物车位置时隐藏 setTimeout(() => { this.addShow = false }, 1000) } } } <style scoped> .transition_test { text-align: left; padding-bottom: 300px; } .shop_cart { padding: 20px; } .shop_cart .add { position: relative; margin-top: 100px; width: 500px; display: inline-block; } .shop_cart .add button { position: absolute; z-index: 99; } .shop_cart .cart{ width: 300px; display: inline-block; } .shop_cart .cart img { width: 100%; } // 一开始调整好商品图片在购物车的位置,移入效果最后显示是在一开始定义好的位置 .shop_cart .add_img { width: 100px; position: absolute; left: 600px; top: -160px; } // 可以有两种方式实现飞入动画,用动画的效果感觉会更好一点 /* 动画效果实现 */ /* @keyframes bounce-in { 0% { transform: scale(1); transform: translate(-610px, 100px); } 100% { transform: scale(.5); transform: translate(0px, 0px); } } .shop_cart-enter-active { animation: bounce-in 1s; } */ /* CSS类名实现 */ .shop_cart-enter-active { transition: all 1s ease-out; } .shop_cart-enter { opacity: 0; transform: scale(.5); transform: translate(-610px, 100px); } </style>
其他效果不单独放了,代码放在一起,可以直接在vue项目中新建一个component,把代码复制过去就可以使用了
<template>
<div class="transition_test">
<h2> 过渡效果</h2>
<button @click="show = !show">click</button>
<!-- <transition name="slide-fade">
<div v-if="show" class="circle"></div>
</transition> -->
<div>
图片放大效果:
<transition name="img-fade">
<img class="bigimg" v-if="show" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="shop_cart">
加入购物车动画(css实现):
<div class="add">
<button @click="addShopCart">add</button>
<transition name="shop_cart">
<img class="add_img" v-if="addShow" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="cart">
<img src="../assets/cart.jpg" alt="">
</div>
</div>
<div class="shop_cart">
加入购物车动画(JavaScript钩子函数实现):
<div class="add">
<button @click="addShopCart1">add</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
<img class="add_img_js" v-if="addShow1" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="cart">
<img src="../assets/cart.jpg" alt="">
</div>
</div>
<!-- 动画数组效果 -->
<ul class="group_list">
<button @click="addItem">addItem</button>
<button @click="removeItem">removeItem</button>
<transition-group name="list">
<li class="group_item" v-for="item in list" :key="item">{{item}}</li>
</transition-group>
</ul>
</div>
</template>
<script>
export default {
name: 'myTransition',
components: {
},
data() {
return {
show: false,
addShow: false,
addShow1: false,
list: [1, 2, 3]
}
},
created() {
},
methods: {
addShopCart () {
this.addShow = true
setTimeout(() => {
this.addShow = false
}, 1000)
},
addShopCart1 () {
this.addShow1 = true
},
// 动画钩子函数
// 进入前状态
beforeEnter (el) {
el.style.left = '-20px'
el.style.top = '-15px'
el.style.transform = 'scale(1)'
},
// 进入中
enter (el, done) {
// 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
el.offsetWidth
el.style.left = '600px'
el.style.top = '-160px'
el.style.transform = 'scale(.5)'
done()
},
// 进入后
afterEnter () {
this.addShow1 = false
},
// 新增
addItem () {
this.list.push(this.list.length + 1)
},
// 删除
removeItem () {
if (this.list.length > 1) {
this.list.pop()
}
}
}
}
</script>
<style scoped>
.transition_test {
text-align: left;
padding-bottom: 300px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aquamarine;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .5s ease-out;
}
.slide-fade-enter, .slide-fade-leave-to {
/* transform: translateX(500px); */
opacity: 0;
}
.bigimg {
width: 300px;
}
.img-fade-enter-active {
transition: all 1s ease-out;
}
.img-fade-enter {
transform: scale(.5);
/* width: 50px; */
}
.shop_cart {
padding: 20px;
}
.shop_cart .add {
position: relative;
margin-top: 100px;
width: 500px;
display: inline-block;
}
.shop_cart .add button {
position: absolute;
z-index: 99;
}
.shop_cart .cart{
width: 300px;
display: inline-block;
}
.shop_cart .cart img {
width: 100%;
}
.shop_cart .add_img {
width: 100px;
position: absolute;
left: 600px;
top: -160px;
}
/* 动画效果实现 */
/* @keyframes bounce-in {
0% {
transform: scale(1);
transform: translate(-610px, 100px);
}
100% {
transform: scale(.5);
transform: translate(0px, 0px);
}
}
.shop_cart-enter-active {
animation: bounce-in 1s;
} */
/* CSS类名实现 */
.shop_cart-enter-active {
transition: all 1s ease-out;
}
.shop_cart-enter {
opacity: 0;
transform: scale(.5);
transform: translate(-610px, 100px);
}
// JavaScript函数
.shop_cart .add_img_js {
width: 100px;
position: absolute;
left: 600px;
top: -160px;
transition: all 1s;
}
// 动态列表
.group_list {
padding: 30px;
}
.group_list .group_item {
width: 200px;
height: 100px;
border: 1px solid orangered;
margin: 10px;
}
.list-enter-active, .list-leave-active {
transition: all .8s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateX(40px);
}
</style>
