欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中的transition封裝組件的實現(xiàn)方法

 更新時間：2019年08月13日 09:42:54   作者：StarlightUnion  
這篇文章主要介紹了Vue中的transition封裝組件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue版本信息：2.5.2

問題起源于使用Vue做網(wǎng)站時涉及到的一個小部件顯示動畫，閱讀了Vue的文檔后結(jié)合網(wǎng)上各位的經(jīng)驗，花了點時間研究了下。

最終的效果如上圖所示，當(dāng)鼠標(biāo)移入灰色方塊時彈出層會至上而下顯示出來，類似于 拉鏈?zhǔn)酱昂??)。

實例

實現(xiàn)上圖所示的效果代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>transition</title>

 <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
 <div id="app">
   <div
    @mouseenter="show"
    @mouseleave="hide">
     <div class="enter-div">
      {{content}}
     </div>
     <transition name="fade">
      <div class="showContainer" v-show="flag">
       彈出層
      </div>
     </transition>
   </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    flag: false,
    content: "鼠標(biāo)移入"
   },
   methods: {
    show: function () {
     this.flag = true;
     this.content = "鼠標(biāo)移出";
    },
    hide: function () {
     this.flag = false;
     this.content = "鼠標(biāo)移入";
    }
   }
  })
 </script>

 <style>
  body, html {
   height: 100%;
   margin: 0;
  }

  #app {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
  }

  .enter-div {
   width: 200px;
   height: 50px;
   /* margin-top: 200px; */
   background-color:darkgrey;
   text-align: center;
   line-height: 50px;
  }

  .showContainer {
   position: absolute;
   right: 620px;
   top: 250px;
   width: 200px;
   /* height: 96px; */
   line-height: 96px;
   text-align: center;
   color: black;
   box-shadow: 0 0 5px -1px #ccc;
   z-index: 10;
   overflow: hidden;
  }

  /* 進(jìn)入和離開時過渡狀態(tài)的 動畫狀態(tài) */
  .fade-enter-active, .fade-leave-active {
   transition: all .10s ease;
   height: 96px;
  }

  /* 進(jìn)入時的 初始狀態(tài) 和 離開時動畫的 結(jié)束狀態(tài) */
  .fade-enter, .fade-leave-to {
   height: 0;
  }

  /* 離開時的 初始狀態(tài) 和 進(jìn)入時動畫的 結(jié)束狀態(tài) */
  .fade-enter-to, .fade-leave {
   height: 96px;
  }
 </style>
</body>
</html>

transition的使用

以上為各類狀態(tài)/過程對應(yīng)的類名示意圖。

1.沒有名字的transition組件

<transition>
  <div>
  ......
  </div>
</transition>

<style>
  .v-enter, .v-leave-to {
  ......
  }
  
  .v-leave, .v-enter-to {
  ......
  }
  
  ......
</style>

2.有名字的transition組件

如下代碼，該transition組件的name屬性為fade，那么應(yīng)設(shè)置的動畫類名為fade-enter，其他的類名也是如此。
<transition name="fade">
  <div>
  ......
  </div>
</transition>

<style>
  .fade-enter, .fade-leave-to {
  ......
  }
  
  .fade-leave, .fade-enter-to {
  ......
  }
  
  ......
</style>

3.自定義過渡類名

<transition
  name="show"
  enter-class="show-enter"
  enter-active-class="animation fly"
  leave-active-class="xxx"
  ......
>
  <div>
  ......
  </div>
</transition>

<style>
  .show-enter {
  ......
  }
  
  .animation {
  ......
  }
  
  .fly {
  ......
  }
  
  ......
</style>

4.自定義鉤子函數(shù)

<transition
  v-on:enter="enter"
  v-on:after-enter="after"
  v-on:leave="leave" 
  ......
>
  <div>
  ......
  </div>
</transition>

methods: {
  enter: function (el) {
    ......
  },
  after: function (el) {
    ......
  },
  ......
}

官方文檔中的用法不止這幾種，這里只例舉了幾種簡單常用的。源碼在此

相關(guān)文章

最新評論