vue 过渡和动画

最新推荐文章于 2023-08-09 10:24:33 发布

清风与我

最新推荐文章于 2023-08-09 10:24:33 发布

阅读量515

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_62897746/article/details/127647643

版权

vue 专栏收录该内容

23 篇文章 4 订阅

订阅专栏

为什么要学习过渡和动画：

提高用户体验与页面的交互性
从而影响用户的行为，引导用户，帮助用户看到动作行为的反馈

什么是过渡、动画

过渡
- 从一个状态向另一个状态插入值，新的状态替换了旧的状态
vue中提供了过渡组件 transition
- 语法格式：
  - transition 放置需要添加过渡的元素 div
  - 使用name属性设置前缀 fade-
  - 如果没有设置name v-
  - vue 标签内部提供了三个进入过渡以及 3个离开过渡的类
  - 进入
    - v-enter 进入过渡的开始状态，作用于开始的一帧
    - v-enter-active 进入过渡生效时的状态，作用于整个过程
    - v-enter-to 进入过渡的结束状态，作用于结束的一帧
  - 离开
    - v-leave 离开过渡的开始状态，作用于开始的一帧
    - v-leave-active 离开过渡生效时的状态，作用于整个过程
    - v-leave-to 离开过渡的结束状态，作用于结束的一帧
- 语法格式代码：
```
<transition name="fade">
	
	<div></div>	
</transition>
```

简单的使用案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.v-enter-active,.v-leave-active{
				transition: opacity 2.5s;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
			}
			/*
				过渡动画的开始：
					v-enter 开始、v-enter-active 过程、v-enter-to 结束 
				过渡动画的结束：
					v-leave 开始、v-leave-active 过程、v-leave-to 结束
			*/
		</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>

效果就是点击内容在几秒后消失，再次点击几秒后显示

vue动画效果的实现案例：

@keyframes：定义动画关键子
scale：按括号里的值放大缩小

<!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	定义动画关键子 */
			/* scale	按括号里的值放大缩小 */
			@keyframes bounce-in {
			  0% {
			    transform: scale(0);
				color:red;
			  }
			  50% {
			    transform: scale(1.5);
			  }
			  100% {
			    transform: scale(1);
				color: green;
			  }
			}
		</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>

效果是点击放大后缩小，并变色，最后缩小到消失，再次点击还是放大后缩小，并变色，最后恢复到默认样式。