VUE再生画面ショット

序文

アウト質問の集中砲火最近では、私は自分の道を少し見つけ、その後、小さなプラグイン上のプログラムとVUEを使用したくない、実際には、秩序と無秩序の形の2スクリーンショットを含み

直接バーコード上

<！ - 弹幕- > 
      < テンプレートV-IF = "barrageData.newsRocket.length> 0" > 
        <！ - 'アニメーション-期間'：6 +さん」、 'アニメーション-遅延'：+さんitem.delay " - > 
        < divのクラス= "ロケット弾幕ラッパー" V-ショー= "barrageData.isBarrage " > 
          < divの
             クラス="弾幕コンテキストbarrageTop" 
            ：スタイル=" {トップ：0.8 + 'REM'、「animation-期間'：barrageData.barrageTop.length> 1 barrageData.barrageTop.length * 4 +？' sの'：' 4S'、
             幅：barrageData。barrageTop.length> 1 '？'： '120％'}」 
          > 
            < DIV クラス= "表示リスト" V-用= "barrageData.barrageTopで（アイテム、インデックス）" ：キー= " 'BR' +インデックス" > 
              < divの> 
                < IMGのクラス= "reImg" ：SRC = "item.avatar" > 
              </ divの> 
              < divのクラス= "弾幕テキスト" V-HTML = "item.desc" > </ DIV > 
            </ DIV > 
          </ DIV > 
        </ DIV > 
        < DIV クラス= "ロケット弾幕ラッパー"V-ショー= "barrageData.isBarrage" > 
          <div
             クラス= "弾幕コンテキストbarrageBottom" 
            ：スタイル= "{トップ：1.8 + 'REM'、 'アニメーション-期間'：barrageData.barrageBottom.length> 1 barrageData.barrageTop.length * 5 + 'S'：？ '4S 」、
            幅：barrageData.barrageBottom.length> 1？ ''： '120％'} " 
          > 
            < DIV クラス= "表示リスト" V-ため= "barrageData.barrageBottomで（項目、インデックス）" ：キー=" 'BR' +インデックス」> 
              < divの> 
                < IMGのクラス= "reImg" ：SRC = "item.avatar" >
              </ DIV > 
              < DIV クラス= "弾幕テキスト"V-HTML = "item.desc" > </ DIV > 
            </ DIV > 
          </ DIV > 
        </ DIV > 
      </ テンプレート> 

      < テンプレートV-ELSE > 
        < divのクラス= "NO-弾幕" V-ショー=」 activityData.register " > {{barrageData.friendsDesc}} </ DIV > 
      </ テンプレート>

CSS

//弹幕
  .barrageラッパー { 
    位置：固定されました。
    高さ：0.7rem。
    幅：7.5rem。
    ホワイトスペース：NOWRAP。
    テキストオーバーフロー：クリップ。
    .barrageコンテキスト{ 
      ディスプレイ：フレックス。
      正当化-コンテンツ：スペースアラウンド。
      //幅：100％ ; 
      高さ：0.7rem。
      左：100％ ;
      可視性：隠されました ; 
      //オーバーフロー：隠されました ; 
      位置：絶対 ; 
    } 
    .displayリスト { 
      表示：曲がります。
      正当化-コンテンツ：スペースアラウンド。
      ALIGN-アイテム：センター ; 
      高さ：0.7rem。
      //位置：絶対 ; 
      //左：0％ 。
      //可視性：隠されました ;
      色：#FFF ; 
      マージン右：1.1rem。
    } 
    IMG { 
      幅：0.7rem。
      高さ：0.7rem。
      境界半径：50％ 。
      背景：＃141540 ; 
      ボーダー：0.04rem固体RGBA（255、255、255、0.7） 。
      位置：相対 ; 
    } 
    .barrageテキスト { 
      オーバーフロー：隠されました。
      テキストオーバーフロー：省略記号。
      ホワイトスペース：NOWRAP。
      背景：RGBA（0、0、0、0.6） 。
      ホワイトスペース：NOWRAP。
      マージン：0 -0.5rem。
      高さ：0.64rem。
      行の高さ：0.64rem。
      パディング：0 0.7rem。
      フォントサイズ：0.24rem。
      border-top-右半径：0.45rem。
      border-bottom-右半径：0.45rem ; 
    } 
  }

コードの表示

アニメーションCSS

彼は、コードまたは複数のコードであることを判断するjsが幅を判断します

CSSに基づいて別のによると、

@keyframes連打 { 
  から{ 
    //左：100％ 。
    可視性：可視。
    変換：移動X（0） ; 
  } 
  100％ { 
    //左：0％ 。
    可視性：隠されました ; 
    変換：移動X（-180％） 。
  } 
} 

barrageBottomを@keyframes { 
  {からの
    視認性：目に見えます。
    変換：移動X（0） ; 
  }
  100％ { 
    可視性：隠されました。
    変換：移動X（-180％） 。
  } 
}

コードの表示

可視性：隠された ;メインカードが住むこのフィールドは消え、場所の反対側に転がり弾幕を解釈し、そして弾幕ません。

では、左後、彼女は無秩序コードであると判断し、次は上よりも速くなります

使用して変換：移動X（0）; つまり、コードが先に実行されません命じ

この弾幕が完了しました

序文

おすすめ