VUE之預警消息橫向滾動

注意：這個滾動是通過css3樣式實現的

1、代碼如下：

<div class="wrapper" >
        <div class="bar" ref="barparent">
          <ul class="bartext" ref="barchild" :style="yellowBarTextStyle">
            <li v-for="(inf, j) in item.alarmInf" :key="j">{{ j + 1 }}.{{inf.title}}:{{ inf.value}}</li>
          </ul>
        </div>
</div>

2、樣式

.wrapper {
  padding: 0 15px;
  display: flex;
  align-items: center;
  // background-color: "#FFF6EC";
}
.bar {
  width: 100%;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  box-sizing: border-box;
}
.bartext{
  white-space: nowrap;
  display: inline-block;
}
.bartext li{
  white-space: nowrap;
  display: inline-block;
  color: red;
  font-size: 14px;
}
.state-text-overflow{
  animation: move_left_right 12s linear 0s infinite ;
}
@keyframes move_left_right {
  from{
      transform: translateX(0%);
  }
  to{
      transform: translateX(-80%);
  }
}

3、vue中，數據和方法

yellowBarTextStyle: {
     paddingLeft: '305px'
}
//方法

 move(){

        this.deviceIds.forEach((item,index)=>{

          //動態賦值動畫區域的左padding 防止卡頓

           const parentClientWidth = this.$refs.barparent[index].clientWidth;

        // console.log("寬度",parentClientWidth)

            this.yellowBarTextStyle.paddingLeft = parentClientWidth + 'px';

            //判斷動畫區域是否超出父元素寬度 寬則有動畫，不寬則無

            const parent = this.$refs.barparent[index];

            const child = this.$refs.barchild[index];

            // console.log("對比",child.clientWidth,parent.clientWidth)

            if(child.clientWidth > parent.clientWidth){

                child.classList.add('state-text-overflow');

            }else{

                child.classList.remove('state-text-overflow');

            }

        })

        

  },