16.vue中Js动画与Velocity.js库结合
2018-07-07 本文已影响8人
yaoyao妖妖
Js钩子动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vvue中Js动画与Velocity.js库结合</title>
<script src="./vue.js"> </script>
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<!-- 动画钩子 -->
<!-- before-enter -->
<!-- 入场动画的钩子before-enter enter after-enter -->
<!-- 出场动画的钩子before-leave leave after-leave -->
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
},
// 进入动画(通过js的钩子实现入场动画)
handleBeforeEnter:function(el){
el.style.color = 'red'
},
// handleBeforeEnter之后
handleEnter:function(el,done){
setTimeout(() => {
el.style.color = 'green'
}, 2000);
setTimeout(() => {
done()
}, 4000);
},
//handleEnter的 done()调用之后
handleAfterEnter:function(el){
el.style.color = 'black'
}
}
})
</script>
</body>
</html>
Velocity.js库和js钩子结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vvue中Js动画与Velocity.js库结合</title>
<script src="./vue.js"> </script>
<link rel="stylesheet" type="text/css" href="./animate.css">
<script src="./velocity.js"></script>
</head>
<body>
<!-- 动画钩子 -->
<!-- before-enter -->
<!-- 入场动画的钩子before-enter enter after-enter -->
<!-- 出场动画的钩子before-leave leave after-leave -->
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
},
// 进入动画(通过js的钩子实现入场动画)
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
// handleBeforeEnter之后
handleEnter:function(el,done){
Velocity(el,
{opacity:1},
{duration:1000,complete:done});
},
//handleEnter的 done()调用之后
handleAfterEnter:function(el){
el.style.color = 'black';
}
}
})
</script>
</body>
</html>
