vue.js动画中的js钩子函数的实现-偶像资源网

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

以实现击球效果为例：

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

击球

代码解析：

<!-- 定义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.js动画中的js钩子函数的实现

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论