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

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

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;
  }
}
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueルーティング切り替えのフェードインとフェードアウトのシンプルな実装
  • Vuejs で背景のフェードインとフェードアウトの切り替えアニメーションを作成する例

<<:  CentOS8でルートパスワードを素早く変更する方法

>>:  CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)

推薦する

JavaScript メッセージ ボックスの例

JavaScript では、警告ボックス、確認ボックス、プロンプト ボックスの 3 種類のメッセージ...

docker compose を使用して consul クラスタ環境を構築する例

領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...

Linux で Nginx ロード バランシングを使用して複数の Tomcat を構成する方法

Linux に nginx と複数の tomcat をインストールする方法はここでは紹介しません。不...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL トリガー: トリガーの作成と使用

この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...

HTML における if 判断の使用

Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...

Linux システムで IPv6 をサポートするように Nginx を設定する方法

1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

Vue は左右のスライド効果のサンプルコードを実装します

序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...

SQL文のANDとORの実行順序で発生する問題

質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...