12.vue 点击购物车小球效果解决定位问题:

4.实现点击购物车小球弹入效果:

<transition
         @before-enter="beforeEnter"
         @enter="enter"
         @after-enter="afterEnter"
      >
        <div class="ball" v-show="ball_show" ref="ball" ></div>
      </transition>

data() {
    return {
      ball_show:false,
    };
  },

定义方法
beforeEnter(el){
          el.style.transform = 'translate(0, 0)'
      },
     enter(el,done) {
       const ball=this.$refs.ball.getBoundingClientRect();
       const shopicon=document.getElementById("shopcar").getBoundingClientRect();
       console.log(ball);
       console.log(shopicon);
       let top=shopicon.left-ball.left;
       let bottom=shopicon.top-ball.top;


       el.offsetWidth;
       el.style.transform=`translate( ${top}px,${bottom}px )`;
       el.style.transition='all 1s cubic-bezier(0,.73,.37,1)';
       done();
     },
     afterEnter(el){
        this.ball_show=!this.ball_show;
     }

小球动态效果实现后遇到一下问题：

• 页面下翻动，定位写死导致定位不准确
• 分辨率更换也会导致小球回不到预定位置

解决思路：

• 小球固定位置不能以px写死
• 需要获取动态位置，求的 小球 和 预定位置（tabbar的icon）相对于屏幕的 left 和 top 值 ，计算得到动态位移位置
• 使用 boject.getBoundingClientReact() 获取一个包含小球 的 left 和 top 的对象，预定终点位置获取方法同理

enter(el,done) {
       const ball=this.$refs.ball.getBoundingClientRect();
       const shopicon=document.getElementById("shopcar").getBoundingClientRect();
       console.log(ball);
       console.log(shopicon);
       let top=shopicon.left-ball.left;
       let bottom=shopicon.top-ball.top;


       el.offsetWidth;
       el.style.transform=`translate( ${top}px,${bottom}px )`;
       el.style.transition='all 1s cubic-bezier(0,.73,.37,1)';
       done();
     },

注意：

• vue 是不建议操作dom 的，但是为了快速解决问题可以少量使用达到事半功倍
• jq 的规则，凡是页面可见的元素都可以用 id 取 dom ，子组件内容也可以根据ID跨页面直接获取，这里shopcar是vue页面 tabbar 的 icon
  下面附上计算原理：
  小球定位2.png