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

<!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>

 

全部评论

相关推荐

06-20 17:42
东华大学 Java
凉风落木楚山秋:要是在2015,你这简历还可以月入十万,可惜现在是2025,已经跟不上版本了
我的简历长这样
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-08 10:39
一个证都没&nbsp;我能填什么
程序员小白条:别人有,你为什么没有,还是这个道理,社会就是比较,竞争,淘汰,你要安逸,那么就要做好淘汰的准备
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务