Vue学习笔记5.4 使用JS动画

你的名字 2022-03-20 10:26 217阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue中Js动画</title>
    	<script src="vue.js"></script>
    	
    	<script src="velocity.min.js"></script>
    </head>
    <body>
    	<div id="app">
    
    			
    		<transition
    			@before-enter="handleBeforeEnter"
    			@enter="handleEnter"
    			@after-enter="handleAfterEnter"
    		>
    			<p v-if="show">Hello World</p>
    		</transition>
    		<button @click="handleClick">toggle</button>
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el:'#app',
    		data: {
    			show: true
    		},
    		methods: {
    		// 2.绑定的JS函数
    			handleClick: function() {
    				this.show = this.show ? false : true
    			},
    			handleBeforeEnter: function(el) {
    				// el.style.color = "red"
    				el.style.opacity = 0;
    			},
    			handleEnter: function(el, done) {
    			// 	setTimeout(() => {
    			// 		el.style.color = "green"
    			// 	}, 2000)
    			// 	setTimeout(()=> {
    			// 		done()
    			// 	}, 4000)
    			// 	
    		// 4.velocity.js库的使用示例。具体使用看官方文档
    		// http://velocityjs.org/#arguments
    
    				Velocity(el, {
    					opacity:1
    				},{
    					duration: 1000,
    					complete: done
    				})
    			},
    			handleAfterEnter: function(el) {
    				// el.style.color = "black"
    				console.log('动画结束')
    			}
    		}
    	})
    </script>
    </html>