码迷,mamicode.com
首页 > 其他好文 > 详细

vue小球动画

时间:2020-08-12 15:52:47      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:sel   sele   定位   动画   translate   nbsp   cti   ansi   lag   

 beforeEnter: function(el) {
      // 通过绝对定位,小球css的top和left值一直都是固定的
      //不管怎么滚动,小球的x y坐标固定
      el.style.transform = "translate(0,0)";
    },

    enter: function(el, done) {
      //小球x y的移动距离要用终点-起点
      el.offsetLeft;
      let s = document
        .querySelector(".mui-input-numbox")
        .getBoundingClientRect();
      let f = document.querySelector(".mui-badge").getBoundingClientRect();
      let x = f.left - s.left;
      let y = f.top - s.top;
      el.style.transform = "translate(" + x + "px," + y + "px)";
      el.style.transition = "all 1s cubic-bezier(.37,-0.3,1,.28)";
      done();
    },
    afterEnter: function(el) {
      this.flag = !this.flag;
    },

vue小球动画

标签:sel   sele   定位   动画   translate   nbsp   cti   ansi   lag   

原文地址:https://www.cnblogs.com/uniapp1/p/13489105.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!