vue2之弹入弹出(就是使用transform:scale(0)+transition)

最新推荐文章于 2024-05-24 16:01:01 发布

默默努力的小老弟

最新推荐文章于 2024-05-24 16:01:01 发布

阅读量619

点赞数

文章标签： vue.js 前端 html5

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

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	       
			.v-enter-active {
				animation: bounce-in 3s;
			}




			 .v-leave-active{

			    /*在这个过程中需要的变化效果*/
				
				animation: bounce-in 3s reverse;

			}
			@keyframes bounce-in{
				0%{
					transform : scale(0);
				}
				50%{
					transform : scale(1.5);
				}
				50%{
					transform : scale(0);
				}

			}
			

		


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

   	<transition>
   		<p v-if="flag">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

          <br>
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   		</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>