Vue动画钩子实现动画

上面的小球动画有个问题,就是小球最后都会移动到150px,450px这个位置.这两个位置最好是计算出来的值,不管分辨率多少的显示屏,都应该移动到相同的位置.
怎么样来实现这样功能呢?

1. 首先我们要获得小球的初始坐标

const ballPosition = this.$refs.ball.getBoundingClientRect();
//通过给小球dom加上refs,这样就可以通过this.$refs
//获取小球dom,然后通过getBoundingClientRect方法获取小球的坐标.

2. 然后获得小球终点位置的坐标

const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
//因为终点位置的元素不一定和小球在同一个组件中,
//所以我们无法通过this.$refs获得,但是我可以给终点元素加上id,
//这样全局都可以通过js原生语法获得

3. 计算小球移动的路径

const xDist = badgePosition.left - ballPosition.left;
const yDist = badgePosition.top - ballPosition.top;

4. 小球移动的动画

//这里使用es6模板字符串语法
el.style.transform = `translate(${xDist}px, ${yDist}px)`;
el.style.transition = "all 1s cubic-bezier(0.4,-0.3,1,.69)";

完整代码如下

    enter(el, done) {
      el.offsetWidth;
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      el.style.transition = "all 1s cubic-bezier(0.4,-0.3,1,.69)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;//通过标志位设置小球的显示与隐藏
    },
    getSelectedCount(count) {
      this.selectedCount = count;
    }