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>

最终效果：

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

赞 (0)

相关推荐

  • 详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生改变   关键字:路由  变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)  两者关系: 钩子函数 ---> 导航 :钩子函数   主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做

  • Vue指令的钩子函数使用方法

    在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实现功能逻辑. 钩子函数 对于自定义指令的定义,Vue2 有 5 个可选的钩子函数. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中).

  • 基于Vue2.X的路由和钩子函数详解

    最近上班有些忙,好久没有更新文章,也没学习新的东西. 今天来说说这个路由钩子吧. 导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数). 钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做.. 导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做.用next()来指定. 我来给大家举

  • Vue 2.0中生命周期与钩子函数的一些理解

    Vue 2.0中生命周期与钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0

  • 解决Vue中mounted钩子函数获取节点高度出错问题

    遇到的问题 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题 后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G

  • Vue手把手教你撸一个 beforeEnter 钩子函数

    为什么要自造beforeEnter钩子函数? 看下问题场景:项目中有一单词列表页面,每个cell都会备注该单词是否已经掌握,点击cell进入详情页,可对该单词进行学习,并标记单词是否掌握,并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词.所以但我点击返回时,单词列表要展示所有单词用户掌握的最新情况. 最终的页面关系是这样的: ​ wordListPage --> wordDetail (对一系列单词进行学习,退出)--> wordListPage(刷新单词列表) 对于上面的场景,使

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

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

    在transition中还可以通过设置javascript钩子函数,实现自定义动画效果. 以实现击球效果为例: 击球 代码解析: <!-- 定义js的钩子函数 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <img v-show="flag" class="ba

  • vue button的@click方法无效钩子函数没有执行问题

    vue button的@click方法无效钩子函数没有执行问题

    目录 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 跨域问题 userData is not defined Vue的第四个bug 钩子函数(mounted/created) Vue的第五个bug vue @click失效问题 贴代码(直接截图) 解决方法 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 事故还原 小胖做完公司的项目,老大看着小胖疲惫的脸庞,有点心疼小胖,就给小胖放了三天假,没有给小胖新的需

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • 5 分钟读懂Python 中的 Hook 钩子函数

    5 分钟读懂Python 中的 Hook 钩子函数

    1. 什么是Hook 经常会听到钩子函数(hook function)这个概念,最近在看目标检测开源框架mmdetection,里面也出现大量Hook的编程方式,那到底什么是hook?hook的作用是什么? what is hook ?钩子hook,顾名思义,可以理解是一个挂钩,作用是有需要的时候挂一个东西上去.具体的解释是:钩子函数是把我们自己实现的hook函数在某一时刻挂接到目标挂载点上. hook函数的作用 举个例子,hook的概念在windows桌面软件开发很常见,特别是各种事件触发的机

  • vue给数组中对象排序 sort函数的用法

    目录 vue给数组中对象排序 sort函数 vue小技巧:简单排序和对象排序 对于数组里面全是number 对于一个对象 有多种类型 vue给数组中对象排序 sort函数 开发穿梭框的时候,需要将左侧选中的数据排序后添加到右侧 先看代码吧,后面解释 originalData为左侧选择的数据: var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}]; 先给每个对象添加一个排序order: for

  • Vue中JS动画与Velocity.js的结合使用

    前面学习了用css实现动画效果,那 Vue 中能不能用js实现动画效果呢? 其实 Vue 提供了很多动画钩子 enter 入场动画钩子函数有before-enter.enter.after-enter before-enter 动画出现前的事件 <div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" //动画出现前的事件 > <

  • 详解Vue源码学习之callHook钩子函数

    Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount

  • vue 自定义指令directives及其常用钩子函数说明

    目录 自定义指令directives及常用钩子函数 说明 钩子函数 vue 全局定义 局部定义(vue-cli) 钩子函数里面的参数 vue 自定义指令 directives选项 directives选项中定义 指令 自定义指令directives及常用钩子函数 说明 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 使用的地方:有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令 钩子函数 inserted:被绑定元素插

  • js文件中调用js的实现方法小结

    方法一: Js_file01.js ======== 复制代码 代码如下: //程序代码 document.write(" <script language=\"javascript\" src="\/com\/ Js_file02.js \" > <\/script>"); 方法二: html代码 程序代码 复制代码 代码如下: <html> <body> <input type="

  • Vue的指令中实现传递更多参数

    目录 概要 基本原理 基于闭包的扩展方案 实例和代码实现 Main.js中将指令对应的插件全局化 ImageLoad插件定义 图片加载管理类的定义 Vue 3.0的实现 概要 我们在使用Vue的开发项目中,经常用自定义指令(directive)来封装一系列的DOM操作,这样做非常方便.一般来说,指令是使用动态指令参数来获取App中的数据. 但是有些时候,自定义指令需要更多的数据来完成更复杂的功能,例如在指令中调用当前App实例的nextTick方法,以确保所有DOM元素加载完成,再进行DOM操作

随机推荐