vue.js动画中的js钩子函数的实现
更新时间：2018年07月06日 14:22:05 作者：章鱼喵_
这篇文章主要介绍了vue.js动画中的js钩子函数的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。
以实现击球效果为例：
击球
代码解析：
<!-- 定义js的钩子函数 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <img v-show="flag" class="ball" :src="ball" alt="" width="30"> </transition>
let vm = new Vue({
el: "#app",
data: {
flag: false,
ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
},
methods: {
// el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
beforeEnter(el) {
// 设置动画开始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新动画效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px, 350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.container {
margin-top: 2%;
}
img.ball {
margin-left: 3%;
}
</style>
<body>
<div class="container">
<div id="app">
<button class="btn btn-danger" @click="flag=!flag">击球</button>
<!-- 定义js的钩子函数 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<img v-show="flag" class="ball" :src="ball" alt="" width="30">
</transition>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: false,
ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
},
methods: {
// el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
beforeEnter(el) {
// 设置动画开始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新动画效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px, 350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要为大家详细介绍了Vue.js动态组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了Vue中使用debugger在浏览器中不起作用的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了在Vue中实现添加全局store方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
setup 用来写组合式 API，从生命周期的角度，相当于取代了 beforeCreate()，这篇文章主要介绍了Vue3 setup 的作用,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了vue-cli@3.0 使用及配置说明,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下2019-03-03
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue-router中query和params的区别 ,需要的朋友可以参考下2022-10-10
这篇文章主要是来和大家探讨一下，Vue的响应式系统仅仅是一个Proxy吗，本文将围绕此问题探索一下Proxy是如何实现Vue响应式的，感兴趣的小伙伴可以了解一下2023-08-08
最新评论