Vueはカードフリップ効果を実現します

Vueはカードフリップ効果を実現します

この記事では、カードフリップ効果を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

1. 成果を達成する

クリックすると、中心の Y 軸に沿って反転効果が得られます。

2. 方法

前面と背面の2つの部分に分かれています。背面のdivはCSSレイアウトで180度反転して前面のdivの後ろに隠れるように設定されています。クリックすると反転アニメーションが実行されます。反転アニメーションを実行するときは、背面のdivを表示するように設定し、前面のdivを非表示にします。これを順に繰り返します。

3. 特定のコード

<テンプレート>
<div id="try">
 <!-- box_rolling で前方宙返りアニメーションを実行します-->
<div class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling">
 <!-- 前面の div -->
 <div class="rollbox_front">
  <div class="contentbox">
   <img src="@/assets/images/s1.png"/>
  </div>
 </div>
 <!-- 次の div -->
 <div class="rollbox_behind">
  <div class="contentbox">
   <img src="@/assets/images/s2.png"/>
  </div>
 </div>
</div>
</div>
</テンプレート>
<スクリプト>

エクスポートデフォルト{
 名前:'試してみる',
 データ(){
  戻る {
   ローリング:false
  }
 }
}
</スクリプト>
<スタイル lang='scss'>
#試す{
 .ロールボックス{
  位置: 相対的;
     パースペクティブ: 1000px;
  幅:200px;
  高さ: 400px;
  マージン:100px 自動;

    &_フロント、
    &_後ろに{
   transform-style: preserve-3d; //すべての子要素が3D空間に表示されることを示します backface-visibility: hidden; //背面が画面を向いているときに要素が表示されるかどうか transition-duration: .5s;
     遷移タイミング関数:'ease-in';
   背景:#008080;
   .コンテンツボックス{
    幅:200px;
    高さ: 400px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    >画像{
     幅:100ピクセル;
    }
   }
    }
    &_後ろに{
      変換: rotateY(180deg);
      visibility:hidden; //要素は非表示ですが、スペースを占有します。position: absolute;
      トップ:0;
      下:0;
      右: 0;
      左: 0;
    }
 }
 .box_rolling{
    .rollbox_front{
      変換: rotateY(180deg);
      可視性:非表示;
    }
    .rollbox_behind{
      変換: rotateY(360deg);
      可視性: 表示可能;
    }
  }
}
</スタイル>

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

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

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

>>:  Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

推薦する

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...

Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

MySQL 5.7.18 のダウンロードとインストールの詳細な手順

MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...

Vue3 でマークダウン エディター コンポーネントを使用する方法

目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...

React 構成 px 変換 rem メソッド

関連する依存関係をインストールするnpm i lib-flexible --save npm i p...

Reactコンポーネント通信の詳細な説明

目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...

MySQL パフォーマンスの包括的な最適化方法リファレンス、CPU、ファイルシステムの選択から mysql.cnf パラメータの最適化まで

この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

Vue は QR コード スキャン機能を実装します (スタイル付き)

必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...

MySQLで重複行を削除する方法

SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...

MySQLは文字列関数のSQL文をインターセプトします

1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...