vue playback screen shot

Foreword

  In recent barrage of questions out, I do not want to use the program and vue on small plug-in, then find their own way a little, in fact, includes 2 screen shot of the form of order and disorder

Directly on the bar code

<!-- 弹幕 -->
      <template v-if=" barrageData.newsRocket.length > 0 ">
        <!-- 'animation-duration':6+'s','animation-delay': item.delay+'s' -->
        <div class="rocket barrage-wrapper" v-show=" barrageData.isBarrage ">
          <div
            class="barrage-context barrageTop"
            :style="{top:0.8+'rem', 'animation-duration': barrageData.barrageTop.length > 1 ? barrageData.barrageTop.length * 4 +'s':'4s',
             width:barrageData.barrageTop.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageTop" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
        <div class="rocket barrage-wrapper" v-show="barrageData.isBarrage">
          <div
            class="barrage-context barrageBottom"
            :style="{top:1.8+'rem', 'animation-duration': barrageData.barrageBottom.length > 1? barrageData.barrageTop.length*5+'s':'4s',
            width:barrageData.barrageBottom.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageBottom" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
      </template>

      <template v-else>
        <div class="no-barrage" v-show=" activityData.register ">{{ barrageData.friendsDesc }}</div>
      </template>

css 

 // 弹幕
  .barrage-wrapper {
    position: fixed;
    height: 0.7rem;
    width: 7.5rem;
    white-space: nowrap;
    text-overflow: clip;
    .barrage-context {
      display: flex;
      justify-content: space-around;
      // width: 100%;
      height: 0.7rem;
      left: 100%;
      visibility: hidden;
      // overflow: hidden;
      position: absolute;
    }
    .display-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 0.7rem;
      // position: absolute;
      // left: 0%;
      // visibility: hidden;
      color: #fff;
      margin-right: 1.1rem;
    }
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      background: #141540;
      border: 0.04rem solid rgba(255, 255, 255, 0.7);
      position: relative;
    }
    .barrage-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.6);
      white-space: nowrap;
      margin: 0 -0.5rem;
      height: 0.64rem;
      line-height: 0.64rem;
      padding: 0 0.7rem;
      font-size: 0.24rem;
      border-top-right-radius: 0.45rem;
      border-bottom-right-radius: 0.45rem ; 
    } 
  }

View Code

 Animated css

js to determine that he is a plurality of code or codes judge a width 

According to another based on css

 

@keyframes barrage {
  from {
    //left: 100%;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    //left: 0%;
    visibility: hidden;
    transform: translateX(-180%);
  }
}

@keyframes barrageBottom {
  from {
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    transform: translateX(-180%);
  }
}

View Code

 

visibility: hidden ; this field to interpret the barrage rolling to the other side of the place, disappear, and will not barrage main card live there

With a left then is to determine that she is disorderly code, the next will be faster than on a

Using  transform: translateX (0); that is, ordered code will not run ahead

 

 

This barrage is completed