Vue学习笔记5.2 CSS过渡动画----使用animate.css

最新推荐文章于 2024-08-07 15:34:36 发布

@凌晨三点半

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量415

点赞数

分类专栏： Vue.js 文章标签： vue animate

本文链接：https://blog.csdn.net/soulwyb/article/details/86995235

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>使用animate.css库</title>
	<script src="vue.js"></script>
	<!-- 4. 可使用animate.css第三方动画库 -->
	<link rel="stylesheet" href="animate.css"></link>
	<style>
/*	1.这是正常的CSS过渡动画的方法。
	先写好@keyframes（CSS3）
	然后在.fade-enter-active 和.fade-leave-active中添加相应的绑定和过渡参数*/
/*		@keyframes bounce-in {
		此部分为CSS3的内容可自行查看W3Cschool
			0% {
				transform: scale(0);
			}
			50% {
				transform: scale(1.5);
			}
			100% {
				transform: scale(1);
			}
		}
*/
/*		.fade-enter-active {
			此部分为CSS3的内容可自行查看W3Cschool
			transform-origin: left center;
			animation: bounce-in 1s;
		}
		.fade-leave-active {
			transform-origin: left center;
			animation: bounce-in 1s reverse;
		}*/
	/*2. 可自定义v-enter-active 和v-leave-active类的名称。*/
/*		.enter {
			transform-origin: left center;
			animation: bounce-in 1s;
		}
		.leave {
			transform-origin: left center;
			animation: bounce-in 1s reverse;
		}*/
	</style>
</head>
<body>
	<div id="app">
<!-- 		<transition
			name="fade"
	3.只需要在这里设置好相应的类名即可
			enter-active-class="enter"
			leave-active-class="leave"
			>
			<p v-if="show">Hello World</p>
		</transition> -->
<!-- 5. animate.css的使用方法。 具体可查看官网 https://daneden.github.io/animate.css/ -->
<!-- 6.在使用animate.css的时候 前面写的style样式就都可以删掉了 -->
		<transition
			name="fade"
			enter-active-class="animated swing"
			leave-active-class="animated shake"
		>
			<p v-if="show">Hello World</p>
		</transition>
		<button @click="handleClick">切换</button>

	</div>
</body>
<script>
	var vm = new Vue({
		el:'#app',
		data: {
			show: true
		},
		methods: {
			handleClick: function() {
				this.show = this.show ? false : true
			}
		}
	})
</script>
</html>

注：

@keyframes:

http://www.w3school.com.cn/cssref/pr_keyframes.asp

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

transform:

http://www.w3school.com.cn/cssref/pr_transform.asp

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

animation:

http://www.runoob.com/cssref/css3-pr-animation.html