17 Vue动画 - Vue中CSS动画原理

最新推荐文章于 2024-05-31 23:33:55 发布

技术~子云

最新推荐文章于 2024-05-31 23:33:55 发布

阅读量337

点赞数

分类专栏： vue 文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/davice_li/article/details/127509816

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue 实现动画的原理图如下所示：

一、我们实现一个点击 change 按钮，把hello world隐藏和显示的功能，使用动画的效果代码如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		<!-- 样式一定要写上，不然后没有动画效果 -->
		<style >
			.v-enter{
				opacity: 0;
			}
			.v-enter-active{
				transition: opacity 3s;
			}
			.v-leave-to{
				opacity: 0;
			}
			.v-leave-active{
				transition: opacity 3s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 实现动画需要加入 transition -->
			<transition>
				<!-- vue 的动画是通过 向某些标签上增加样式来实现的动画效果 -->
				<div v-if="show">hello world</div>
			</transition>
			<!-- 实现点击change 隐藏和显示 hello world的功能  -->
			<button @click="handleBtnClick">change</button>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({
				el: "#app",
				data:{
					show: true
				},
				methods:{
					handleBtnClick:function() {
						this.show = !this.show
					}
				}
			})
		</script>

	</body>
</html>