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>
最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
其默认“BDD”式接口，mocha提供钩before()，after()，beforeEach()，和afterEach()。这些应该用于设置前置条件并在测试后进行清理。 describe('hooks', function() { before(function() { // runs before all tests in this block }); after(function() {
-
空闲任务钩子函数 空闲任务在执行时可以选择是否回调一个钩子函数，空闲任务运行在系统的最低优先级上，因此只有在应用程序任务全部处在阻塞或挂起态时，空闲任务才会得到执行。这使得可以使用空闲任务的钩子函数将系统转入低功耗模式，或者做一些其他任务。 使用空闲任务的钩子函数，需要将configUSE_IDLE_HOOK设置为1.并且，空闲任务钩子函数需要申明为如下原型: void vApplicationI
-
一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽
-
本文向大家介绍原生js实现jquery函数animate()动画效果的简单实例，包括了原生js实现jquery函数animate()动画效果的简单实例的使用技巧和注意事项，需要的朋友参考一下 通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所
-
系统钩子函数 宏定义 #define RT_OBJECT_HOOK_CALL(func, argv) do { if ((func) != RT_NULL) func argv; } while (0) 内核对象钩子函数 函数 rt_err_t rt_thread_idle_sethook (void(*hook)(void)) 设置空闲线程钩子函数 rt_err_t r
-
指令钩子函数会被传入以下参数： el：指令所绑定的元素，可以用来直接操作 DOM 。 binding：一个对象，包含以下属性： name：指令名，不包括v-前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。 oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。 expressio