横向衔接滚动

<!--  -->
<template>
  <div id=''>
    <div class="leaveWordCon">
      <div class="leaveWordInner"
           :style="'animation: userPanelsCarousel ' +(((scroll.scrollNumber)*scroll.scrollItemWidth)/2*0.02)+'s linear infinite;'">
        <div class="leave-word-pannels-row">
          <div class="leave-word-pannel"
               v-for='(item,index) in cardList1'
               :key='index'>
            <div class="leave-word-panel-cnt">
              <div class='leave-word-panel-cnt-inner'>
                {{item.content}}
              </div>
            </div>
            <div class="leave-word-panel-ft">
              <a>
              </a>
              <h3 class='leave-word-panel-name'>
                {{item.name}}
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      //计算滚动开始
      scroll: {
        scrollNumber: 6,//滚动一行数据个数 可以获取后台数据后再赋值
        scrollItemWidth: 356,//最小单元的宽度  一个小的方块滚动图片宽度
      },
      //计算滚动结束
      cardList1: [
        {
          name: '111111',
          content: '22222222'
        }, {
          name: '111111',
          content: '22222222'
        }, {
          name: '111111',
          content: '22222222'
        }, {
          name: '111111',
          content: '22222222'
        }, {
          name: '111111',
          content: '22222222'
        }, {
          name: '111111',
          content: '333'
        }
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    writeSty () {

      let style = document.createElement('style');
      style.setAttribute('type', 'text/css');
      document.head.appendChild(style);
      let sheet = style.sheet;
      //根据每一个数据为页面添加不同的keyframes
      let scrollItemWidth = this.scroll.scrollItemWidth//最小单元宽度
      let scrollNumber = this.scroll.scrollNumber//个数
      let nu = ((scrollNumber) * scrollItemWidth) / 2
      sheet.insertRule(
        `@keyframes userPanelsCarousel {
            0% {
              transform: translate3d(0px, 0, 0);
            }
            100% {
              // transform: translate3d(-12104px, 0, 0);
              transform: translate3d(-`+ nu + `px, 0, 0);
              // transform: translate3d(-100px, 0, 0);
            }
          }`, 0
      );
    },


  },
  created () {

  },
  mounted () {
    setTimeout(() => {//模拟异步
      this.writeSty()
    }, 1000)
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.leaveWordCon {
  // position: relative;
  // height: 800px;
  // width: 100%;
  // border: 1px solid #000;
  // left: 0;
  // padding-top: 48px;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1920px;
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;

  .leaveWordInner {
    // animation: userPanelsCarousel 120s linear infinite;

    // &:hover {
    //   animation: userPanelsCarousel 0s linear infinite;
    // }

    .leave-word-pannels-row {
      margin-bottom: 32px;
      // border: 1px solid #000;
      .leave-word-pannel {
        display: inline-block;
        vertical-align: top;
        margin-right: 70px;
        width: 286px;
        white-space: normal;

        .leave-word-panel-cnt {
          margin-bottom: 20px;
          padding: 16px 25px;
          background-color: #2f0765;
          border-radius: 2px 2px 2px 0;
          position: relative;
          color: rgba(255, 255, 255, 0.8);

          // color: yellow;
          .leave-word-panel-cnt-inner {
            font-size: 14px;
            line-height: 20px;
            height: 80px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
          }

          &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 100%;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8px 10px;
            border-color: #2f0765 transparent transparent #2f0765;
            pointer-events: none;
          }
        }

        .leave-word-panel-ft {
          // 名字
          .leave-word-panel-name {
            display: inline-block;
            vertical-align: middle;
            max-width: 8em;
            font-size: 16px;
            line-height: 22px;
            font-weight: 600;
            color: #bb9e57;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>