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

推薦する

XHTML 特殊文字コレクション

注意&#160;ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...

Linux コマンドラインでパケットをキャプチャするために tcpdump を使用するいくつかの機能

tcpdump は、ネットワークの問題のトラブルシューティングに効果的に役立つ、柔軟で強力なパケット...

面接の質問: 3 行 3 列のレイアウト、表は結合され、ネストされた表は許可されません

面接の質問で、3 行 3 列のレイアウトが求められます。1 行目の 2 番目の列と 2 行目の 2 ...

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...

MySQL データベース内の数十億のデータを素早くクリーンアップする方法

今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

Vue 開発ガイドの重要な知識の要約

目次概要0. JavaScriptとWeb開発の基礎1. Vueの基本概念Vue コア機能コンポーネ...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

体験をデザインする: ボタンには何があるか

<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...

Linux コマンドを使用してオーディオ形式を変換および結合する方法

FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...