vue动画实现的三种方式

最新推荐文章于 2023-09-09 15:52:39 发布

圣京都

最新推荐文章于 2023-09-09 15:52:39 发布

阅读量733

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40994735/article/details/108321973

版权

vue 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

vue动画实现的三种方式

1 vue动画

1 vue动画

基本解释：

vue不直接创造动画，动态提供vue需要的类名
当显示或者隐藏时vue 才会动态提供类名
需要用到内置组件

用到的类

v-enter-active 进入的过程
v-enter 进入前
v-enter-to 进入到
v-leave-active 离开的过程
v-leave 离开前
v-leave-to 离开到
v 为transition的name属性值

1.1动画案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/* 进入过程*/
			.fade-enter-active {
				transition: all ease 2s;
			}

			.fade-enter {
				opacity: 0;
				transform: rotate(-180deg);
			}

			.fadr-enter-to {
				opacity: 1;
				transform: rotate(0deg);
			}

			/* 离开过程 */
			.fade-leave-active {
				transition: all ease 2s;
			}

			.fade-leave {
				opacity: 1;
				transform: rotate(0deg);
			}

			.fade-leave-to {
				opacity: 0;
				transform: rotate(180deg);
			}
		</style>
	</head>

	<body>
		<div id="app">
			<h1>动画</h1>
			<button type="button" @click="flage=!flage">切换</button><br>

			<transition name="fade">
				<img src="img/sun.jpg" width="160" v-if="flage">
			</transition>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flage: true
				}
			})
		</script>
	</body>
</html>

1.2 动画案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@keyframes fadeIn{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@keyframes fadeOut{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.fade-enter-active{animation: fadeIn ease 2s}
			.fade-leave-active{animation:  fadeOut ease 2s;}
		</style>
	</head>


	<body>
		<div id="app">
			<h1>动画</h1>
			<button type="button" @click="flage=!flage">切换</button><br>

			<transition name="fade">
				<img src="img/sun.jpg" width="160" v-if="flage">
			</transition>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flage: true
				}
			})
		</script>
	</body>
</html>

1.3 动画案例3

使用css插件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/animate.min.css" />
		<style type="text/css">

		</style>
	</head>

	<body>
		<div id="app">
			<h1>动画</h1>
			<button type="button" @click="flage=!flage">切换</button><br>

			<transition name="fade" enter-active-class="rollIn animated" leave-active-class="hinge animated">
				<img src="img/sun.jpg" width="160" v-if="flage">
			</transition>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flage: true
				}
			})
		</script>
	</body>
</html>

圣京都

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue动画实现的三种方式

vue动画实现的三种方式1 vue动画1.1动画案例11.2 动画案例21.3 动画案例31.4 todolist1 vue动画基本解释：vue不直接创造动画，动态提供vue需要的类名当显示或者隐藏时vue 才会动态提供类名需要用到内置组件用到的类v-enter-active 进入的过程v-enter 进入前v-enter-to 进入到v-leave-active 离开的过程v-leave 离开前v-leave-to 离开到v 为transition的
复制链接

扫一扫