transition 平移属性实现 横向整屏 滚动

需要达到效果:

  1. 横向展示商品,默认一行展示5个,超出隐藏,页面一打开,该模块自动横向滚动
  2. 有前进后退按钮,默认隐藏,鼠标移入显示,且动画停止;鼠标移出按钮隐藏,动画重启

 

效果展示: (由于是截图拼接成的gif, 滚动效果未能展示出来,正常滚动是5s后发生,且很顺滑)

 

实现原理:

　　1. 使用css3 的 transition 过渡属性完成动画,使动画盒子脱标(脱离标准流), 不影响其他布局, 且方便通过 left 属性进行动画 

　　　　具体就是通过在发生动画的盒子里修改行内属性 left 值,进而发生动画 

　　2. 使用 cubic-bezier 控制变化的速度曲线

 

实现代码:

　　HTML:

<template>
  <div class="hotSalesGoods_container">
    <div class="hot_sale_product_box" v-if="hotSaleProductList.length">
      <section class="w mt30 clearfix">
        <div class="module_box module_box2">
          <div class="title">
            <div class="left">
              <span>1F</span>
              热销商品
            </div>
          </div>
          <div
            class="mall_good_box hot_product_btn_box"
            @mouseenter="hoverTimer()"
            @mouseleave="outTimer()"
          >
            <div
              class="mall_good_inner"
              :style="{'left': -(swiperConfig.index * (swiperConfig.width +16)) +'px'}"
            >
              <hotMallGoods
                :msg="iitem"
                :index="j"
                v-for="(iitem,j) in hotSaleProductList"
                :key="j+'key'"
              ></hotMallGoods>
            </div>
            <i class="hot_product_btn_left cursor" @click="prevPage()"></i>
            <i class="hot_product_btn_right cursor" @click="nextPage()"></i>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
View Code

 

　　JS:

<script>
import hotMallGoods from "./components/mallGoods";
export default {
  name: "hotSalesGoods",
  data() {
    return {
      swiperTimer: null,
      swiperConfig: {
        width: 1220,
        index: 0,
        page: 0,
      },
      hotSaleProductList: [], //
    };
  },

  components: {
    hotMallGoods,
  },

  updated() {
    console.log(this.swiperConfig.index);
  },

  created() {
    this.init();
    this.outTimer();
  },

  methods: {
    init() {
      this.hotSaleProductList = [
        {
          productImage:
            "//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
          productName: "测试商品-防雾剂",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
          productName:
            "九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
          productName:
            "飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
          productName:
            "飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
          productName:
            "飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
          productName:
            "飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/13/201806131021319705.jpg",
          productName:
            "飞利浦（PHILIPS） 家用卧式吸尘器 尘桶型可水洗滤网无耗材大功率地毯地板吸尘机 孔雀蓝FC8515",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/13/201806131033313750.jpg",
          productName:
            "飞利浦（PHILIPS） 蒸汽挂烫机家用手持大功率1600W电熨斗烫衣机带晾衣架1.6L-2L GC512/48（3档）",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
          productName:
            "飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
          productName: "测试商品-防雾剂",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
          productName:
            "九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
          productName: "测试商品-防雾剂",
          sales: 54,
          price: 0.01,
        },
        {
          productImage:
            "https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
          productName:
            "九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
          sales: 54,
          price: 0.01,
        },
      ];
      this.swiperConfig.page =
        Math.floor(this.hotSaleProductList.length / 5) -
        1 +
        (this.hotSaleProductList.length % 5 ? 1 : 0);
    },

    // 鼠标移入清除动画
    hoverTimer() {
      clearInterval(this.swiperTimer);
    },

    // 鼠标移出开始动画
    outTimer() {
      clearInterval(this.swiperTimer);
      this.swiperTimer = setInterval(() => {
        this.autoPlay();
      }, 5000);
    },

    // 开启自动动画
    autoPlay() {
      if (this.swiperConfig.page - this.swiperConfig.index) {
        this.swiperConfig.index += 1;
      } else {
        this.swiperConfig.index = 0;
      }
    },

    // 左移动
    prevPage() {
      if (this.swiperConfig.page - this.swiperConfig.index) {
        this.swiperConfig.index += 1;
      } else {
        this.swiperConfig.index = 0;
      }
    },

    // 右移动
    nextPage() {
      if (!this.swiperConfig.index) {
        this.swiperConfig.index =
          this.swiperConfig.page - this.swiperConfig.index;
      } else {
        this.swiperConfig.index -= 1;
      }
      console.log(this.swiperConfig.index);
    },
  },
};
</script>
View Code

 

　　CSS:

<style scoped lang="less">
.hotSalesGoods_container {
  padding: 100px 0;
  margin: 0px auto;
  width: 1500px;
  // width: 100%;
  background: rgba(0, 0, 0, 0.2);
  // height: 500px;
  .hot_sale_product_box {
    // background: rgba(0, 0, 0, 0.2);
    width: 1220px;
    margin: 0 auto;
    // margin: 30px 0;
    .module_box2 {
      height: 420px;
      position: relative;
      .mall_good_box {
        width: 100%;
        height: 360px;
        overflow: hidden;
        position: relative;
        .mall_good_inner {
          // margin-left: -16px;
          position: absolute;
          left: 0px;
          top: 0px;
          white-space: nowrap;
          background: #ededed;
          z-index: 20;
          transition: left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          // transform: translate3d(0, 0, 0);
          // transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          // transition: left 0.5s ease-in-out;
          
          .good-item {
            display: inline-block;
            // margin-left: 16px;
            margin-right: 16px;
          }
        }
      }

      .hot_product_btn_box {
        position: absolute;
        width: 100%;
        height: 360px;
        z-index: 22;
        &:hover {
          .hot_product_btn_left,
          .hot_product_btn_right {
            opacity: 1;
          }
        }
        .hot_product_btn_left,
        .hot_product_btn_right {
          opacity: 0;
          transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
          position: absolute;
          width: 50px;
          height: 50px;
          top: 50%;
          z-index: 111;
          transform: translateY(-50%);
        }
        .hot_product_btn_left {
          left: 20px;
          background: url("http://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303389272140619.png")
            no-repeat center/100%;
          &:hover {
            background: url("//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303390930454246.png")
              no-repeat center/100%;
          }
        }
        .hot_product_btn_right {
          right: 20px;
          background: url("http://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303389733372943.png")
            no-repeat center/100%;
          &:hover {
            background: url("//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303391341562323.png")
              no-repeat center/100%;
          }
        }
      }
    }

    .module_box {
      // height: 632px;
      width: 100%;
      // background: rgba(0, 0, 0, 0.2);
      background-color: #fff;
      &:last-child {
        margin-bottom: 50px;
      }
      .title {
        height: 60px;
        line-height: 60px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #da251d;
        padding: 0 10px;
        .left {
          font-size: 22px;
          font-weight: bold;
          color: #000;
          span {
            font-size: 30px;
            color: #da251d;
          }
        }
        .right {
          // background: rgba(0, 0, 0, 0.2);
          height: 100%;
          display: flex;
          align-items: center;
          .more_icon {
            width: 66px;
            height: 12px;
            background: url("//vpjicai.oss-cn-beijing.aliyuncs.com/upload/vphonor/202007/13/637302600877688271.png")
              no-repeat center/100%;
            &:hover {
              background: url("//vpjicai.oss-cn-beijing.aliyuncs.com/upload/vphonor/202007/13/637302601861212254.png")
                no-repeat center/100%;
            }
          }
        }
      }

      .floors {
        width: 100%;
        height: 572px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .imgbanner {
          width: 300px;
          height: 572px;
          .banner {
            width: 100%;
            height: 100%;
            background-position: center;
          }
        }
        .mall_good_box {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          height: 100%;
          background: #f5f5f5;
        }
      }
    }
  }
}
</style>
View Code

 

贝塞尔曲线:

 cubic-bezier(<x1>,<y1>,<x2>,<y2>),  其实是用4个点确定速度曲线,已知 两个点 (0,0) (1,1) ,我们通过 x1,y1 x2,y2 坐标来控制另外两个点,从而确定速度曲线

 相关链接:  关于cubic-bezier 贝塞尔曲线的简单了解

 

posted @ 2020-07-28 18:26  银翘解毒片  阅读(1075)  评论(0)  编辑  收藏  举报