Vue はクリックフリップ効果を実現します

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりです。

1.

2.

3.

//html コード テスト デモの名前はランダムにコピーされました <div class="Demo">
        <div class="Before" :class="isTop ? 'contain-Before' : ''" @click="handleBefore"></div>
        <div class="After" :class="isTop ? 'contain-After' : ''" @click="handleAfter" style="font-size:20px;color:black">これは裏面のコンテンツです</div>
    </div>

//データにisTop:falseを定義する

//メソッドのhandleBefore()メソッド{
  if(!this.isTop){
         this.isTop = true
     }
 },
 ハンドル後(){
     if(this.isTop){
         this.isTop = false
     }
 }
//css
。デモ{
    幅: 375ピクセル;
    高さ: 300px;
    上マージン: 50px;
    /* 左マージン: 500px; */
    位置: 相対的;
    パースペクティブ: 800px;
    ボックスのサイズ: 境界線ボックス;
    
    
}
。前に{
    幅: 100ピクセル;
    高さ: 200px;
    位置: 絶対;
    トップ:0;
    左: 0;
    背景繰り返し: 繰り返しなし;
    背景の位置: 中央 中央;
    背面の可視性: 非表示;
    遷移: 1.5 秒;
    背景画像:url('../assets/images/chunfen4.jpg');
    border:1px 実線の黄色;
 
}
。後{
    幅: 100ピクセル;
    高さ: 200px;
    位置: 絶対;
    トップ:0;
    左: 0;
    色: #fff;
    背景色:#fff;
    テキストインデント: 2em;
    変換: rotateY(-180deg);
    背面の可視性: 非表示;
    遷移: 1.5 秒;
    border:1px 実線の黄色;
}
.Demo .contain-Before{
    変換: rotateY(180deg);
}
.Demo .contain-After{
    変換: rotateY(0deg);
}

これで完了です。スライドや反転をしたい場合は、イベントを自分で削除し、div に :hover メソッドを追加します。

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

以下もご興味があるかもしれません:
  • Vue はカードフリップカルーセル表示を実装します
  • Vue.js は大画面のデジタルスクロールと反転効果を実現します
  • Vue 画像閲覧コンポーネント v-viewer 使用状況分析 [回転、拡大縮小、反転などの操作をサポート]
  • Vue iview 複数の画像、大きな画像のプレビュー、ズーム、反転
  • Vueはカードフリップ効果を実現します

<<:  Linuxでホスト名を変更する方法

>>:  MySQLの重複排除操作を極限まで最適化する方法

推薦する

CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

MySQL のデータ削除とデータ テーブル メソッドの例

MySQL でデータやテーブルを削除するのは非常に簡単ですが、削除するとすべてのデータが消えてしまう...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

MySQLは実際に分散ロックを実装できる

序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...

Vueカスタムテーブル列実装プロセス記録

目次序文レンダリングsetTable コンポーネント使用結論序文フォームを使用して PC 側のプロジ...

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

VPSサーバーでよく使われるパフォーマンステストスクリプトの概要

これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...

Yahooが開発したウェブページスコアリングプラグインYSlowのスコアリングルール

YSlow は、Yahoo USA が開発したページ スコアリング プラグインです。非常に優れていま...

Vueにログイン認証傍受機能を設置するアイデアを詳しく解説

目次1. 解決策2. サーバーから返されたトークンをブラウザに保存する3. リクエストにアクセス権限...

Docker Compose のサイドカーモードの詳細な説明

目次Docker Composeとは要件に不適切な言語が使用されている実装Docker Compos...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...