vue.js动画中的js钩子函数的实现

来源：动视网责编：小采时间：2020-11-27 22:11:57

vue.js动画中的js钩子函数的实现

vue.js动画中的js钩子函数的实现:在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。以实现击球效果为例：击球代码解析：  <transition @before-enter=beforeEnter @enter=enter @after

推荐度：

点击下载本文 文档为doc格式

导读vue.js动画中的js钩子函数的实现:在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。以实现击球效果为例：击球代码解析：  <transition @before-enter=beforeEnter @enter=enter @after

在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。

以实现击球效果为例：

击球

代码解析：

<!-- 定义js的钩子函数 -->
<transition
 @before-enter="beforeEnter"
 @enter="enter"
 @after-enter="afterEnter"
>
 <img v-show="flag" class="ball" :src="ball" " 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" " 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.js动画中的js钩子函数的实现

推荐度：

点击下载本文 文档为doc格式

标签： VUE 动画 js

热门焦点

vue.js动画中的js钩子函数的实现

vue.js动画中的js钩子函数的实现

vue.js动画中的js钩子函数的实现

最新推荐

猜你喜欢

热门推荐