vue2之弹入弹出实战

最新推荐文章于 2024-07-31 11:38:49 发布

默默努力的小老弟

最新推荐文章于 2024-07-31 11:38:49 发布

阅读量387

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121457369

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	        .v-enter , .v-leave-to{
	        	/*进入和离开的动作*/
				opacity: 0;
				/*transform : opacity;*/
				transform : translateX(150px);
	        }
			.v-enter-active,.v-leave-active{

			    /*在这个过程中需要的变化效果*/
				
				transition : all 1s ease;

			}
			

		


	</style>
</head>
<body>
   <div id="app">
   	<button @click="flag= !flag">点击</button>

   	<transition>
   		<p v-if="flag">xxxxx</p>

   	</transition>
	



   </div>	





</body>
 <script src="js/vue.js"></script>
 <script type="text/javascript">
 var Vue=new Vue({
     el : "#app",
     data : {
        "flag" :false
     }



 });



 </script>
</html>