vue.js动画中的射流研究…钩子函数的实现

在过渡中还可以通过设置爪哇岛描述语言钩子函数，实现自定义动画效果。

以实现击球效果为例：

击球

代码解析：

！-定义射流研究…的钩子函数-transition @ before-enter=' before enter ' @ enter=' enter ' @ after-enter=' after enter ' img v-show=' flag ' class=' ball ' : src=' http : ball ' alt=' width=' 30 '/transition let VM=new Vue({ El : ' # app '，data: { flag: false，ball : ' 3https://上传-images。金苏。io/upload _ images/11000 image mogr 2/自动定向/剥离|imageView2/2/w/1240' }，methods: { //el表示要执行动画的那个数字正射影像图元素，是原生的编程对象beforeEnter(el) { //设置动画开始之前的初始位置埃尔。风格。transform=' translate(0，0)' }，输入(El，done) { //刷新动画效果埃尔。在两者之间；//动画完成后的样式埃尔。风格。transform=' translate(550 px，350 px)'；//动画的持续时间埃尔。风格。过渡=“所有3s轻松”；//完成其实是后回车()的引用done()；}，afterEnter(el) { //动画完成之后调用this.flag=！this.flag } }})完整代码

！doctype html html lang=' en ' head meta charset=' UTF-8 ' link href=' https://cdn。bootscs。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS“rel=”外部no跟随“rel=”样式表脚本src=' http :3359 cdn。jsdeliver。net/NPM/vue/dist/vue。js '/脚本/头部样式.容器{利润率-最高：2%；} img。球{边距-左侧：3%；}/stylebodydiv class=' container ' div id=' app ' button class=' BTNBTN-危险' @ click=' flag=！'旗帜'击球/button！-定义射流研究…的钩子函数-transition @ before-enter=' before enter ' @ enter=' enter ' @ after-enter=' after enter ' img v-show=' flag ' class=' ball ' : src=' http : ball ' alt=' width=' 30 '/transition/div/div脚本让VM=new Vue({ El : ' # app '，data: { flag: false，ball : ' 3https://上传-images。姬叔。io/uploadimagemogr 2/自动定向/剥离|imageView2/2/w/1240' }，methods: { //el表示要执行动画的那个数字正射影像图元素，是原生的编程对象beforeEnter(el) { //设置动画开始之前的初始位置埃尔。风格。transform=' translate(0，0)' }，输入(El，done) { //刷新动画效果埃尔。在两者之间；//动画完成后的样式埃尔。风格。transform=' translate(550 px，350 px)'；//动画的持续时间埃尔。风格。过渡=“所有3s轻松”；//完成其实是后回车()的引用done()；}，afterEnter(el) { //动画完成之后调用this.flag=！this.flag } } })/script/body/html最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。