宜宾网站建设公司

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

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

10年积累的成都做网站、网站建设、外贸营销网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有天桥免费网站建设让你可以放心的选择与我们合作。

以实现击球效果为例：

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

击球

代码解析：



  

let vm = new Vue({
  el: "#app",
  data: {
    flag: false,
    ball: '/upload/otherpic59/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
    }
  }
})

完整代码

最终效果：

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

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


网站栏目：vue.js动画中的js钩子函数的实现
转载来源：http://ybzwz.com/article/jdhsee.html

其他资讯