この記事では、カードフリップ効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...
Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...
MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...
目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...
関連する依存関係をインストールするnpm i lib-flexible --save npm i p...
目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...
この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...
必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...
SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...
1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...