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

た入场券 2022-03-20 06:00 291阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>使用animate.css库</title>
    	<script src="vue.js"></script>
    	
    	<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"
    			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][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][http_www.w3school.com.cn_cssref_pr_transform.asp]

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

animation:

[http://www.runoob.com/cssref/css3-pr-animation.html][http_www.runoob.com_cssref_css3-pr-animation.html]

将CSS动画样式与HTML元素绑定

tranform-origin:

[http://www.w3school.com.cn/cssref/pr\_transform-origin.asp][http_www.w3school.com.cn_cssref_pr_transform-origin.asp]

transform-origin 属性允许您改变被转换元素的位置。

[http_www.w3school.com.cn_cssref_pr_keyframes.asp]: http://www.w3school.com.cn/cssref/pr_keyframes.asp
[http_www.w3school.com.cn_cssref_pr_transform.asp]: http://www.w3school.com.cn/cssref/pr_transform.asp
[http_www.runoob.com_cssref_css3-pr-animation.html]: http://www.runoob.com/cssref/css3-pr-animation.html
[http_www.w3school.com.cn_cssref_pr_transform-origin.asp]: http://www.w3school.com.cn/cssref/pr_transform-origin.asp