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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS8でルートパスワードを素早く変更する方法
>>: CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)
JavaScript では、警告ボックス、確認ボックス、プロンプト ボックスの 3 種類のメッセージ...
領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...
Linux に nginx と複数の tomcat をインストールする方法はここでは紹介しません。不...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...
Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...
目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...
目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...
序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...
質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...