实现过渡进场和出场的动画效果

最新推荐文章于 2024-05-23 20:52:25 发布

华天下之大软

最新推荐文章于 2024-05-23 20:52:25 发布

阅读量678

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_37117521/article/details/109733941

版权

Vue 专栏收录该内容

33 篇文章

订阅专栏

以下是vue动画从入门到跑路目录

Vue中的js动画与Velocity.js的结合

Vue中多个元素或组件的过渡

Vue中的列表过渡

Vue中的动画封装

<html>
<head>
	<meta charset="UTF-8">
	<title>Vue中CSS动画原理</title>
	<script src="./vue.js"></script>
	<style>
		.fade-enter,
		.fade-leave-to{
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active{
			transition: opacity 3s;
		}
 
	</style>
</head>
<body>
	<div id="root">
		<!-- 没有name的时候样式默认前缀是v -->
		<transition name="fade">
			<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script >
		var vm = new Vue({
			el:'#root',
			data:{
				show:true
			},
			methods:{
				handleClick:function() {
					this.show =!this.show
				}
			}
        })
 
    </script>
</body>
 
</html>