040：vue项目中 transition 动画实现推拉门效果

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

（1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

应用场景

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

transition 使用实现步骤

1. 把需要添加动画的元素用 transition 标签包起来

<transition name="left">
	<div class="leftpart" v-show="isLeft">
		gis-dajianshi
	</div>
</transition>
1
2
3
4
5

2. 给这个 transition 标签一个名字（比如 left）
3. 添加入场动画， class 类名是 “标签名字 + enter-active”

.left-leave 
.left-enter-active
1
2

4. 定义动画效果（@keyframes）