Vue之过渡+动画

最新推荐文章于 2022-05-10 14:11:11 发布

裴嘉靖

最新推荐文章于 2022-05-10 14:11:11 发布

阅读量339

点赞数

分类专栏：动画 Vue CSS 文章标签：过渡

本文链接：https://blog.csdn.net/peijiajing/article/details/102837494

版权

Vue 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

课程大纲

（1）页面初始化渲染动画
（2）transition过渡+@keyframes动画
（3）过渡&&动画时长控制—type属性
（4）自定义时长

页面初始化渲染动画

目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。
【前言】
如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下:
类名和进入的动画效果相同即可

过渡+动画

如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性
步骤：
1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动，如下所示
2、设置transition过渡属性值
测试后发现此时便可以实现过渡+动画同时作用与指定元素
时间BUG：
目前为止，过渡时间与动画@keyframes类型时间还不一致，这里过渡时间为3s，查看源码后发现动画库的延时为1秒
如果时间不进行统一，可能导致不可预测的bug，影响vue项目性能，所以需要统一时间
过渡时长type属性
一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性，语法如下
（1）type=”transition”
以过渡时长为准

过渡时长type属性

（1）type=”transition”以过渡时长为准，测试如下
点击按钮，3s后才真正隐藏消失

动画时长type属性

除此之外，也可以以@keyframes动画时长为准，语法如下
（2）type=”animation”
以动画时长为准
验证方法和之前类似，控制台检测即可。

自定义时长

除了使用transition标签元素的type属性去指定时长外，也可以自定义时长，此时需要用到duration延迟属性，如法如下:
整个播放时长为10s，即10000ms
入场时长+出场时长
- 除了统一设定时长外，也可以分开设置入场+出场时长，如下所示
注意：duration延时属性，如果想识别后面的表达式，需要利用v-bind动态绑定该属性，否则会报错。
Vue之过渡+动画具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.demo {
				width: 200px;
				height: 200px;
				background: red;
			}

			.demo1 {
				width: 200px;
				height: 200px;
				background: green;
			}

			.fade-enter,
			.fade-leave-to {
				opacity: 0;
			}

			.fade-enter-active,
			.fade-leave-active {
				transition: opacity 3s;
			}

			.fade-enter-to,
			.fade-leave {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<transition 
					<!--除了统一设定时长外，也可以分开设置入场+出场时长 -->
			v-bind:duration="{enter:3000,leave:2000}" 
			<!--type="animation"里的type等于animation那就是默认的一秒。
			如果等于*type="transition"你就是css里面设定的时间3s -->
		<!-- 一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性， -->
			type="animation" appear appear-active-class="animated swing"
			 enter-active-class="animated swing fade-enter-active" 
			 leave-active-class="animated swing fade-leave-active" 
			 name="fade">
				<div class="demo" v-show="status"></div>
			</transition>
			<button @click="handleClick">toggle</button>
		</div>
		<script type="text/javascript">
			var root = new Vue({
				el: '#root',
				data: {
					status: true
				},
				methods: {
					handleClick() {
						this.status = !this.status;
					}
				}
			})
		</script>
	</body>
</html>

完毕，有问题留言小编…

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue之过渡+动画

课程大纲（1）页面初始化渲染动画（2）transition过渡+@keyframes动画（3）过渡&&动画时长控制—type属性（4）自定义时长页面初始化渲染动画目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-cl...
复制链接

扫一扫