vue的过渡和动画效果

最新推荐文章于 2024-07-24 14:58:19 发布

黑爱紫秀

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量107

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_62228315/article/details/127862516

版权

vue的过渡和动画

过渡
- transition
动画
- 实现思路

过渡

transition

话不多说上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.v-enter-active,.v-leave-active{
				transition: opacity 5.5s;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 视图 -->
		<div id="app">
			<button v-on:click="show = !show">toggle - 切换</button>
			<transition>
				<!-- 过渡标签 -->
				<h3 v-if="show">哈哈哈哈哈哈</h3>
			</transition>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					show:true
				}
			})
		</script>
	</body>
</html>

效果：利用点击事件v-if和v-show来操作，第一次点击从透明度100%显示到0%不显示，5.5秒执行完，第二次点击从隐藏到显示。

动画

实现思路

点击按钮进行切换，利用v-if和v-show来实现显示和隐藏

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 开始*/
			.v-enter-active {
			  animation: bounce-in .5s;
			}
			/* 结束 */
			.v-leave-active {
			  animation: bounce-in .5s reverse;
			}
			/* 动画开始的关键字@keyframes */
			@keyframes bounce-in {
			  0% {
			    transform: scale(0);
			  }
			  50% {
			    transform: scale(1.5);
			  }
			  100% {
			    transform: scale(1);
			  }
			}
			
			
		</style>
	</head>
	<body>
		<!-- 视图 -->
		<div id="app">
			<button v-on:click="show = !show">toggle - 切换</button>
			<transition>
				<!-- 过渡标签 -->
				<h3 v-if="show">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h3>
			</transition>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					show:true
				}
			})
		</script>
	</body>
</html>