vue中的js动画和velocity.js库20

最新推荐文章于 2024-08-22 08:55:05 发布

百味皆苦

最新推荐文章于 2024-08-22 08:55:05 发布

阅读量250

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36925536/article/details/91389127

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的js动画和velocity.js</title>
		<script src="vue.js"></script>
		<script src="velocity.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用vue的js钩子结合velocity.js实现一个透明度渐变的效果 -->
			<!-- 1：定义js钩子函数 -->
			<transition
				@before-enter="handleBeforeEnter"
				@enter="handleEnter"
				@after-enter="handleAfterEnter"
			>
				<div v-if="show">hello world</div>
			</transition>
			<button type="button" @click="handleBtn">出现/隐藏</button>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					show:true
				},
				/* 2：实现钩子函数 */
				methods:{
					handleBtn:function(){
						this.show=!this.show
					},
					handleBeforeEnter:function(el){
						/* el.style.color="red"进入前颜色变为红色 */
						el.style.opacity=0;/* 进入之前透明度为0 */
					},
					handleEnter:function(el,done){
						/* setTimeout(()=>{
							el.style.color="green"
						},2000)进入后两秒变为绿色
						setTimeout(()=>{
							done()
						},4000) 四秒后动画结束*/
						
						/* 3：使用velocity.js让动画执行1S然后透明度变为1 */
						Velocity(el,{
							opacity:1
						},{
							duration:1000,/* 动画执行1S */
							complete:done
						})
					},
					handleAfterEnter:function(el){
						/* el.style.color="black"动画完成后变为黑色 */
						alert('handleAfterEnter')
					}
				}
			})
		</script>
	</body>
</html>