第040个
专栏目标
在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。
应用场景
vue项目中,某些时候需要将某些区块的进入进出做成动画的形式,给项目增加交互特色。 vue中可以用transition来包裹区块内容,设定进入进出的时间和动画状态。
示例效果
示例源代码(共168行)
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-25
*/
<template>
<div class="container">
<div class="top">
<h3>vue项目中transition动画实现左右区块滑动进入效果</h3>
<div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
</div>
<h4>
<el-button size="mini" type="primary" @click="goIn"> 滑动进入关门 </el-button>
<el-button size="mini" type="primary" @click="goOut"> 滑动出去开门 </el-button>
</h4>
<transition name="left">
<div class="leftpart" v-show="isLeft">
gis-dajianshi
</div>
</transition>
<transition name="right">
<div class="rightpart" v-show="isRight">
gis-dajianshi
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isLeft: false,
isRight: false,
}
},
methods: {
goIn() {
this.isLeft = true;
this.isRight = true;
},
goOut() {
this.isLeft = false;
this.isRight = false;
},
},
}
</script>
<style scoped>
.container {
width: 1000px;
height: 580px;
margin: 50px auto;
border: 1px solid green;
position: relative;
}
.top {
margin: 0 auto 130px;
padding: 10px 0;
background: peru;
color: #fff;
}
.leftpart,
.rightpart {
width: 350px;
height: 400px;
position: absolute;
bottom: 10px;
background: lightpink;
color: #fff;
line-height: 200px;
}
.leftpart {
left: 0;
}
.rightpart {
right: 0;
}
.left-enter {
animation: left-dialog-fade-in 0.3s ease;
}
.left-leave {
animation: left-dialog-fade-out 0.6s ease forwards;
}
.left-enter-active {
animation: left-dialog-fade-in 0.3s ease;
}
.left-leave-active {
animation: left-dialog-fade-out 0.6s ease forwards;
}
.right-enter {
animation: right-dialog-fade-in 0.3s ease;
}
.right-leave {
animation: right-dialog-fade-out 0.6s ease forwards;
}
.right-enter-active {
animation: right-dialog-fade-in 0.3s ease;
}
.right-leave-active {
animation: right-dialog-fade-out 0.6s ease forwards;
}
@keyframes left-dialog-fade-in {
0% {
transform: translate3d(-100%, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes left-dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(-100%, 0, 0);
opacity: 1;
}
}
@keyframes right-dialog-fade-in {
0% {
transform: translate3d(100%, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes right-dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(100%, 0, 0);
opacity: 1;
}
}
</style>
transition 使用实现步骤
- 把需要添加动画的元素用 transition 标签包起来
<transition name="left">
<div class="leftpart" v-show="isLeft">
gis-dajianshi
</div>
</transition>
- 给这个 transition 标签一个名字(比如 left)
- 添加入场动画, class 类名是 “标签名字 + enter-active”
.left-leave
.left-enter-active
- 定义动画效果(@keyframes)