文字横向移动效果

 <ul class="rescue-ul" >
      <li class="rescue-list" v-for="(item,index) in list" :key="index" > 
        <div class="rescue-list-content">
          <div class="list-marque" ref="marque" :class="moveText(item.tag)" >
            <div class="oh">
              <span class="rescue-name" :title="item.elevatorName">{{item.elevatorName}}</span>
              <span class="fr">{{item.alarmTime}}</span>
            </div>              
          </div>
          <!-- 移动的文字特效要两个实现 -->
          <div class="list-marque2" v-if="item.tag">
            <div class="oh">
              <span class="rescue-name" :title="item.elevatorName">{{item.elevatorName}}</span>
              <span class="fr">{{item.alarmTime}}</span>
            </div>    
           
          </div>
        </div>                
      </li>
    </ul>

　　

export default {
  data(){
    return {
      list: [{
        elevatorName: '深感产业园1栋1单元',
        alarmTime: '2020-12-02',
        tag: true
      },{
        elevatorName: '奥里奥克1栋1单元',
        alarmTime: '2020-12-06',
        
      }]
    }
  },

  methods: {
    // 根据tag 为true 判断是新增接警 当前接警文字移动
    moveText(tag){
      if(tag){
        return 'marque-text'
      }
    },
  }
}

　　

.rescue-ul {
  height: 100%;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
}
.rescue-list {
  border-bottom: 1px #0D1431 solid;
  cursor: pointer;
  display: flex;
  overflow: hidden;
  align-items: center;
  height: 50%;
}
.rescue-list:last-child{
  border-width: 0;
}
.rescue-list-content {
  flex: 1;
  margin-left: 10px;
  position: relative;
  height: 30px;
  overflow: hidden;
}
.list-marque {
  position: absolute;
  left: 0;
  width: 100%; 
}
.list-marque2 {
  position: absolute;
  left: 110%;
  width: 100%;
  box-sizing: border-box;
  animation: marquee2 15s  linear 8;
}
.marque-text {
  animation: marquee1 15s linear 8;
}
/* Make it move */
@keyframes marquee1 {
  0% {
    left: 0;
  }
  100% {
    left: -110%;
  }
}

@keyframes marquee2 {
  0% {
    left: 110%;
  }
  100% {
    left: 0%;
  }
}