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の重複排除操作を極限まで最適化する方法

推薦する

Dockerネットワーク作成に--subnetを追加した後の問題を解決する

Docker ネットワークの作成に –subnet を追加した後、docker network ls...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

MYSQL マスタースレーブ レプリケーションの知識ポイントの概要

単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...

マウスのドラッグ効果を実現するJavaScript

この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

VMwareがLinuxシステムをインストールして起動した後に黒い画面が表示される問題を解決する

1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

スーパーバイザーウォッチドッグの使い方を3分で学ぶ

ソフトウェアとハ​​ードウェア環境centos7.6.1810 64ビット cat /etc/red...

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

WIN10 システムと Docker 内部コンテナ IP 間の通信方法

1. Windows 版の Docker をインストールしたら、Docker クイックスタート ター...

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

導入: AD は Active Directory の略称で、中国語では Active Direct...