vue——实现飞入购物车效果(重点在于获取元素的位置)

╰半夏微凉° 2022-09-02 04:26 388阅读 0赞

昨天项目负责人问我能否在电商项目中加入购物车时，加一个飞入购物车的功效。

这个效果其实是比较常见的，之前我也有遇到这种需求，因为不太熟，直接拒绝。现在还是想办法实现一下吧。

效果图如下：  
![在这里插入图片描述][ded29ae9ad2a4a9889c34eeef5b66ce7.gif_pic_center]

当点击`购物车动画`按钮时，在商品图部分出现一个图片，这个图片会沿一定的轨迹，飞到购物车中，此时会调取加入购物车接口，购物车中的数值会加1。

基本功能就是这样：

## 飞入购物车最重要的就是获取元素的位置 ##

其实对于动画，我们已知的就是：`animation`和`transition`，都可以实现动画，现在的重点就是如何获取元素的位置。

## 1.商品图的位置(点击的是右侧的按钮) ##

关于这个图片，我是这样处理的，我在页面最外面的一层中添加了一个`img`元素，然后给元素添加`position:absolute`，则此元素就是脱离文档流的浮动于整个页面之上的元素了。通过修改元素的`left`和`top`值，就可以改变图片的位置了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

#### 1.点击的是`购物车动画`的按钮，可以从此按钮入手，找到对应的图片的位置 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
如果要获取当前点击元素的位置，则可以将`$event`传入到点击事件中：

我们是需要获取当前元素距离整个页面顶部的距离，然后赋值给商品图片的`top`就可以了。

因此此时需要用到下面的函数，获取某一个元素距离整个页面顶部的距离：

#### 2.通过递归的方式获取元素到页面顶部的距离 ####

getElementTop(element) { 
        var actualTop = element.offsetTop;    //这是获取元素距父元素顶部的距离
        var current = element.offsetParent;   //这是获取父元素
        while(current !== null) {       //当它上面有元素时就继续执行
            actualTop += current.offsetTop;   //这是获取父元素距它的父元素顶部的距离累加起来
            current = current.offsetParent;　　//继续找父元素
          }
        return actualTop;
    }

`offsetTop`可以获取当前元素距离父级元素的距离，然后通过递归，不停的找元素的父级，并将距离相加，最终就可以拿到当前元素距离整个页面的高度了。

同理：元素距离页面左边的距离也可以获取到：

getElementLeft(element) { 
        var actualLeft = element.offsetLeft;    //这是获取元素距父元素顶部的距离
        var current = element.offsetParent;   //这是获取父元素
        while (current !== null) {       //当它上面有元素时就继续执行
            actualLeft += current.offsetLeft;   //这是获取父元素距它的父元素顶部的距离累加起来
            current = current.offsetParent;　　//继续找父元素
        }
        return actualLeft;
    }

整合上面的代码如下：

var top = this.getElementTop(el);
    var left = this.getElementLeft(el);

由于页面的整体布局，按钮左边距离商品图片的距离是1100左右，因此我可以拿到按钮元素距离页面左边的距离后，减去`1100`，就可以获取到对应图片的位置了。(图片的位置也就是:`left`和`top`)

此时是有一个问题的，因为`el-button`是`elementUi`中的组件，最终渲染完成的`html`结构中其实是一个`button`包含`span`标签，如果点击的元素是`span`，则上面说的距离`1100`就不准了。  
所以此时需要找到这个`button`，保证拿到的位置`left top`是`button`的数值。

#### 3.当前点击的元素需要保证是`button` ####

var el = e.currentTarget || e.target;
    var tagName = e.target.tagName;//可以根据这个tagName来进行判断
    if (tagName == 'SPAN') { //如果当前点击的是中间的文字部分，也就是span标签
        el = el.closest("button");//则需要找到最近的button标签，也就是我们想要的标签
    }

#### 4.最终找到对应的图片的位置 ####

var el = e.currentTarget || e.target;
    var tagName = e.target.tagName;
    if (tagName == 'SPAN') { 
        el = el.closest("button");
    }
    console.log(e.target.tagName,el, el.tagName);
    var top = this.getElementTop(el);
    var left = this.getElementLeft(el);![在这里插入图片描述](https://img-blog.csdnimg.cn/ee88915933214c1590b40977de611214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70)
    
    this.$refs['donghuaImg'].style.left = left-1100+'px';//具体数值可以微调一下
    this.$refs['donghuaImg'].style.top = top-20+ 'px';//具体数值可以微调一下
    this.$refs['donghuaImg'].style.width = "68px";//设置一下宽高，因为动画结束后，宽高设置了为0，因此再次点击时需要恢复原有的宽高
    this.$refs['donghuaImg'].style.height = "67px";

# 到这里为止，找到图片的初始位置了 #

接下来需要找到图片的最终位置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

#### 1.页面滚动的距离计算 ####

页面滚动的距离可以通过：`document.documentElement.scrollTop`来计算

#### 2.固定定位的元素距离页面顶部的距离 ####

还是用最上面的计算距离的函数，这个元素的`ref`是`cartLan`  
`this.getElementTop(this.$refs['cartLan']);`

var topEnd = document.documentElement.scrollTop + cartTop+30;

#### 3.获取元素距离浏览器左侧的距离，可以通过`getBoundingClientRect`来处理 ####

var leftEnd = this.$refs['cartLan'].getBoundingClientRect().left+30;

最终代码如下：

this.$refs['donghuaImg'].style.transition = "";
    this.$refs['donghuaImg'].style.border = "2px solid #f90";
    this.srcImg = row.ProPic || '/Content/img/common/pic_big.jpg';
    var el = e.currentTarget || e.target;
    var tagName = e.target.tagName;
    if (tagName == 'SPAN') { 
        el = el.closest("button");
    }
    console.log(e.target.tagName,el, el.tagName);
    var top = this.getElementTop(el);
    var left = this.getElementLeft(el);
    this.$refs['donghuaImg'].style.left = left-1097+'px';
    this.$refs['donghuaImg'].style.top = top-20+ 'px';
    this.$refs['donghuaImg'].style.width = "68px";
    this.$refs['donghuaImg'].style.height = "67px";
    var cartTop = this.getElementTop(this.$refs['cartLan']);
    //上面的是初始化大小和位置
    setTimeout(() => { 
    	//之后给定动画，并获取终点的位置
        this.$refs['donghuaImg'].style.transition = 'all 0.5s linear,top 0.5s cubic-bezier(.8,0,.94,.28)';
        var leftEnd = this.$refs['cartLan'].getBoundingClientRect().left+30;
        var topEnd = document.documentElement.scrollTop + cartTop+30;
        setTimeout(() => { 
        	//指定终点的大小和购物车的动画
            this.$refs['donghuaImg'].style.width = "20px";
            this.$refs['donghuaImg'].style.height = "20px";
            this.$refs['donghuaImg'].style.left = leftEnd + 'px';
            this.$refs['donghuaImg'].style.top = topEnd + 'px';
            this.$refs['cartImg'].style.animation = 'shakeface .5s 0.3s';
            //之后隐藏商品图，也就是将图片大小置为0，边框去除
            setTimeout(() => { 
                this.$refs['donghuaImg'].style.width = "0px";
                this.$refs['donghuaImg'].style.height = "0px";
                this.$refs['donghuaImg'].style.border = '0px solid #f90';
                setTimeout(() => { 
                    this.$refs['cartImg'].style.animation = '';
                }, 1000)
            }, 10)
        }, 20)
    }, 10)

现在感觉购物车的位置还是有点不太懂，这个花了我很多时间。因为`js`实在是有点差……

# 购物车的位置可以通过下面的方式来计算 #

整个浏览器可视区域的高度：`document.documentElement.clientHeight`  
页面如果超过一屏高度后，会出现滚动，则整个页面的整体高度就是一屏的高度+滚动条滚动的高度  
滚动条滚动的高度：`document.documentElement.scrollTop`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
`var topEnd = document.documentElement.scrollTop + document.documentElement.clientHeight - 250;`具体数值可以最后微调一下

最终显示效果也是可以的。这样是比较好理解的一种方式了……

完成！！！！

[ded29ae9ad2a4a9889c34eeef5b66ce7.gif_pic_center]: /images/20220829/c3fa0985103247c8ae3fafd2c902c3de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/02ca3100d40f45d79b0a0fe86e447a8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/3d19e695e1d24d5cbbd0a7aee660d4b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/0013d91e599f4b98a7d3c71d8e4a13fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/76997d39fa2f4a07ad3e604ec3667246.png