Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

効果画像:

コード：

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <meta name="レンダラー" content="webkit">
  <meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
  <meta name="flexible" content="initial-dpr=2" />
  <meta name="ビューポート"
   コンテンツ="幅=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
  <meta name="author" content="bright2017" />
  <title>CSS アニメーション</title>
  <link rel="スタイルシート" type="text/css" href="css/reset.css" />
  <script src="js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
  <スタイル>
   .検索ページリスト{
    幅: 100%;
    位置: 相対的;
   }
 
   .hidden_view {
    幅: 100%;
    背景: #000000;
    不透明度: 0.7;
    位置: 固定;
    左: 0;
    上: 0;
    zインデックス: 9;
   }
 
   .クリックアニメーション{
    テキスト配置: 中央;
    フォントサイズ: 20px;
    パディング: 100px 0;
   }
 
   .screen_cent {
    幅: 280ピクセル;
    高さ: 600px;
    位置: 絶対;
    右: 0;
    下部: 0;
    zインデックス: 9;
    境界線の半径: 10px 0 0 10px;
    オーバーフロー: 非表示;
   }
 
   .スクリーンデータ{
    幅: 100%;
    高さ: 100%;
    背景: #FFFFFF;
   }
   .show_view-enter {
    アニメーション: show_view-dialog-fade-in 1.5s イーズ;
   }
   
   .show_view-leave {
    アニメーション: show_view-dialog-fade-out 1.5 秒で徐々に進む;
   }
   
   .show_view-enter-active {
    アニメーション: show_view-dialog-fade-in 1.5s イーズ;
   }
   
   .show_view-leave-active {
    アニメーション: show_view-dialog-fade-out 1.5 秒で徐々に進む;
   }
   
   @keyframes show_view-dialog-fade-in {
    0% {
     変換: translateX(280px);
    }
   
    100% {
     変換: translateX(0);
    }
   }
   
   @keyframes show_view-dialog-fade-out {
    0% {
     変換: translateX(0);
    }
   
    100% {
     変換: translateX(280px);
    }
   }
   
  </スタイル>
 </head>
 <body id="body">
  <div class="search_page_list" id="app" :style="{height: win_height+'px'}">
 
   <div class="click_animation" @click="screen_click">アニメーションを開く</div>
 
   <div class="hidden_view" :style="{height: win_height+'px'}" v-show="表示" @click="screen_hide_click"></div>
   <トランジション名="show_view">
    <div class="screen_cent" v-show="isshow">
     <div class="screen_data" transition="show_view"></div>
    </div>
   </トランジション>
  </div>
  <script type="text/javascript">
   window.onload = 関数() {
    // コンテンツを初期化する var app = new Vue({
     el: '#app',
     データ： {
      表示: 偽、
      isshow: false、
      ウィン_高さ: ''、
     },
     マウント: 関数() {
      // ライフサイクル this.win_height = window.innerHeight;
     },
     メソッド: {
      スクリーンクリック() {
       // フィルターを表示します this.show = true;
       this.isshow = true;
      },
      screen_hide_click() {
       // フィルターを非表示 let that = this;
       setTimeout(関数() {
        that.show = false;
       }, 1500);
       that.isshow = false;
      }
     }
    });
   }
  </スクリプト>
 </本文>
</html>

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

以下もご興味があるかもしれません: