css的transition失效，使用js实现页面左右滑动及动画效果

目录

代码： 

 补充：

offsetWidth 

offsetLeft、offsetTop、offsetRight、offsetBottom

Math

setInterval() 方法

---

代码： 

<div class="meunFormat">
    <compontent-slide :style="meunWidths" class="menuSixth"></compontent-slide>
    <div>
        <!--左滑-->
        <i class="el-icon-arrow-left" @click="moveHandel(1)"></i>
        <!--右滑-->
        <i class="el-icon-arrow-right" @click="moveHandel(-1)"></i>
    </div>
</div>

computed: {
    //滑动模块的宽度，可动态计算
    meunWidths() {
      return {
        width: `${this.meunWidth}px`,
      }
    },
}

//滑动函数
moveHandel(num) {
      //滑动距离
      this.meunMoveValue += num * 960
      //滑动模块父元素offsetwidth
      let parentMeunWidth = document.querySelector('.meunFormat').offsetWidth
      //如果右滑，滑动距离置为0
      if (this.meunMoveValue >= 0) { 
        this.meunMoveValue = 0 
      }
      //如果左滑距离的绝对值>=滑动模块宽度-父元素宽度(100是左右滑动按钮宽度)
      else if (Math.abs(this.meunMoveValue) >= this.meunWidth - (parentMeunWidth - 100)) {
        //滑动距离=-(滑动模块宽度-父元素宽度(100是左右滑动按钮宽度))
        this.meunMoveValue = - (this.meunWidth - (parentMeunWidth - 100))
      }
      //滑动模块
      var box = document.querySelector('.menuSixth');
      //有动画效果的滑动
      this.move(box, this.meunMoveValue)
},
move(obj, target) {
    //obj:滑动模块dom，target:滑动距离
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    //每隔20ms不停地调用函数，返回id值
    obj.timer = setInterval(function () {
        //每次移动的步长=(总移动距离-dom的offsetLeft)/10
        var step = (target - obj.offsetLeft) / 10
        //左移，即target为正数时，向上取整每次移动的步长；右移，即target为负数时，向下取整每次移动的步长
        step = target >= 0 ? Math.ceil(step) : Math.floor(step)
        //如果dom的offsetLeft不等于总移动距离
        if (obj.offsetLeft != target) {
            //dom的style的left属性为dom的offsetLeft加步长
            obj.style.left = obj.offsetLeft + step + "px";
        } else {
            //当dom的offsetLeft等于总移动距离时，定时调用的函数停止
            clearInterval(obj.timer);
        }
    }, 20);
}

 补充：代码中move函数参考：js控制元素左右缓慢移动和页面上下缓慢移动_1024小神的博客-CSDN博客_js 缓慢滚动

 

 补充：

---

offsetWidth 

一个只读属性，它返回该元素的像素宽度，宽度包含内边距（padding）和边框（border）和元素的水平滚动条（如果存在且渲染的话），不包含外边距（margin），是一个整数，单位是像素 px。

---

offsetLeft、offsetTop、offsetRight、offsetBottom

以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。

现分以下几种情况说明：

• 在父元素均不设置position属性时，

在Chrome，opera和IE浏览器中，offsetLeft是，元素边框外侧到浏览器窗口内侧的距离且body.offsetLeft=0；

在firefox浏览器中offsetLeft是，元素边框外侧到body内侧的距离body.offsetLeft=-边框宽度

• 父元素设置position元素时又分为两种情况，

如果父元素是body且body设置了position属性，

在Chrome和opera浏览器中offsetLeft是，元素边框外侧到body边框外侧的距离，

在IE和fireForx浏览器中offsetLeft是，元素边框外侧到body边框内侧的距离

如果父元素不是body元素且设置了position属性时，

offsetLeft为，元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。

参考：offsetWidth与offsetLeft_willard_cui的博客-CSDN博客_offsetleft

---

Math

Math.abs()：返回一个数的绝对值；（参数必须是一个数值，如果参数不是数字返回 NaN,如果参数为 null 返回 0）

Math.ceil()：向上取整，即它总是将数值向上舍入为最接近的整数；（Math.ceil(6.0)——返回值为：7；Math.ceil(6.5)——返回值为：7；Math.ceil(-6.5)——返回值为：-6）

Math.floor()：向下取整，即它总是将数值向下舍入为最接近的整数；（Math.floor(6.0)——返回值为：6；Math.floor(6.5)——返回值为：6；Math.floor(-6.5))——返回值为：-7 ）

Math.round()：四舍五入，即它总是将数值四舍五入为最接近的整数。

---

setInterval() 方法

按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。