vuejs 使用钩子完成动画效果,使用Velocityjs,完成动画效果
华易安
除了使用c3的动画效果,我们还可以使用js方式
<transition>
这个组件还有6个钩子函数可以使用
分别是
@before-enter(进入前触发)@enter(进入触发) @after-enter(进入后触发)
@before-leave (离开前触发)@leave(离开触发) @after-leave(离开后触发)
1.其中@enter和@leave中有两个参数el,和done ,其中done类似于管道符,最后调用done()才能
触发, @after-enter或@after-leave
2.所有的钩子都有el参数,都可以绑定变化的元素
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handelAfterEnter"
@before-leave=handleBefroeLeave @leave=handleLeave @after-leave="handelAfterLeave">
<h1 v-show="isShow">hello world</h1>
</transition>
<button @click="isShow=!isShow">toggle</button>
</div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
methods: {
//进入动画(从无到有,显示出来)
handleBeforeEnter(el) {
el.style.opacity = 1
el.style.color = "#f00"
console.log("befroeEnter", el);
},
handleEnter(el, done) {
console.log("enter", el,);
//done 类是于管道符 ,代表结束这个动画过程
el.style.color = "#6cf"
setTimeout(() => {
done()
}, 2000);
},
handelAfterEnter(el) { //结束时候动画
console.log("after-enter", el);
// ----------这里开始就是影藏时候开始触发
el.style.color = "#0a0"
setTimeout(() => {
}, 1000);
},
//离开动画(从有到无,隐藏)
handleBefroeLeave(el) {
console.log("befroeLeave", el);
},
handleLeave(el, done) {
console.log("leave", el);
setTimeout(() => {
el.style.color = "#000"
}, 1000);
setTimeout(() => {
done()
}, 1000);
},
handelAfterLeave(el) {
console.log("after-leave", el);
el.style.color = "#0f0"
setTimeout(() => {
el.style.opacity = 0
}, 1000);
}
}
})
</script>
这样我们经常通过使用velocityjs进行动画效果
<!-- 引入velocityjs-->
<script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js"></script>
<!-- 引入vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handelAfterEnter"
@before-leave=handleBefroeLeave @leave=handleLeave @after-leave="handelAfterLeave">
<h1 v-show="isShow">hello world</h1>
</transition>
<button @click="isShow=!isShow">toggle</button>
</div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
methods: {
//进入动画(从无到有,显示出来)
handleBeforeEnter(el) {
console.log("before-enter", el);
el.style.color = "red"
el.style.opacity = 0
},
handleEnter(el, done) {
console.log("enter", el);
Velocity(el, { opacity: 1, color: "#0a0" }, { duration: 4000, complete: done })
// console.log(el);
},
handelAfterEnter(el) { //结束时候动画
console.log("after-enter", el);
// el.style.opacity = 1
},
handleBefroeLeave(el) {
console.log("befroeLeave", el);
// el.style.color = "red"
el.style.opacity = 1
},
handleLeave(el, done) {
console.log("leave", el);
Velocity(el, { opacity: 0, color: "#6cf" }, { duration: 4000, complete: done })
},
handelAfterLeave(el) {
console.log("after-leave", el);
}
}
})
</script>
类似资料：