84Vue - JavaScript 钩子
JavaScript 钩子
2023-09-11 14:15:43 时间
可以在属性中声明 JavaScript 钩子
HTML代码:
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
JS代码:
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用。
当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。 否则,它们会被同步调用,过渡会立即完成。
一个使用 Velocity.js 的简单例子:
HTML代码:
<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
JS代码:
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
效果:
相关文章
- aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【把数据存到LBS云2/2】
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript Crocks] Recover from a Nothing with the `alt` method
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] Global import
- 实用的JavaScript技巧、窍门和最佳实践
- PHP和JAVASCRIPT判断访客终端是电脑还是手机
- 面向对象的JavaScript(一)命名空间
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Redirect the browser using JavaScript
- [Javascript] Hoisting in JavaScript
- [Javascript] Prototype 2 Object.create()
- 一次性搞定JavaScript 从 ES6 到 ES12的基础框架知识
- Javascript 学习 笔记四
- 【编程实践】JavaScript 正则匹配实例讲解
- JavaScript兼容问题汇总[实时更新]
- 每天一个JavaScript实例-从一个div元素删除一个段落
- Javascript入门学习
- web前端框架Javascript开发基础之JavaScript作用域