Vue+js はビデオのフェードインとフェードアウト効果を実現します

<テンプレート>
  <div class="video-css">
    <div class="videocss" ref="videodom" style="background-color:black;">
      <ビデオ幅="100%" ref="再生" スタイル="不透明度: 1" :src="videoSrc2"></ビデオ>
    </div>
    <div class="ビデオ-but">
      <el-button type="primary" @click="play()">再生</el-button>
      <el-button type="primary" @click="pause()">一時停止</el-button>
      <el-button type="primary" @click="fadeIn(100)">フェードイン</el-button>
      <el-button type="primary" @click="fadeOut(100)">フェードアウト</el-button>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      ビデオソース: require('../../assets/web_1496003377.mp4'),
      ビデオソース2: require('../../assets/video.mp4')
    }
  },
  メソッド: {
    遊ぶ（） {
      this.$refs.play.play()
    },
    一時停止（） {
      this.$refs.play.pause()
    },
    フェードイン(速度) {
      それを = これとする
      var speed = 速度 || 30 ;
      var 数値 = 0;
      var st = setInterval(関数(){
        数値++;
        $refs.play.style.opacity = num/10; です。
        数値>=10の場合{  
          クリア間隔(st);
        }
      }、 スピード）;
    },
    フェードアウト(速度) {
      それを = これとする
      var speed = 速度 || 30 ;
      var 数値 = 10;
      var st = setInterval(関数(){
        数値--;
        $refs.play.style.opacity = num / 10; です。
        数値<=0の場合{ 
          クリア間隔(st);
        }
      }、 スピード）;
    }
  }
}
</スクリプト>

<style lang="less" スコープ>
.ビデオ-css {
  .videocss{
    幅: 800ピクセル;
    高さ: 450px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
  }
  .ビデオ-but {
    ディスプレイ: フレックス;
    上マージン: 20px;
    コンテンツの配置: flex-start;
    align-content: flex-start;
  }
}
</スタイル>