vue版本信息：2.5.2
問題起源于使用Vue做網站時涉及到的一個小部件顯示動畫，閱讀了Vue的文檔后結合網上各位的經驗，花了點時間研究了下。
最終的效果如上圖所示，當鼠標移入灰色方塊時彈出層會至上而下顯示出來，類似于 拉鏈式窗簾(?)。
實例
實現上圖所示的效果代碼如下：
<!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: "鼠標移入" }, methods: { show: function () { this.flag = true; this.content = "鼠標移出"; }, hide: function () { this.flag = false; this.content = "鼠標移入"; } } }) </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; } /* 進入和離開時過渡狀態的 動畫狀態 */ .fade-enter-active, .fade-leave-active { transition: all .10s ease; height: 96px; } /* 進入時的 初始狀態 和 離開時動畫的 結束狀態 */ .fade-enter, .fade-leave-to { height: 0; } /* 離開時的 初始狀態 和 進入時動畫的 結束狀態 */ .fade-enter-to, .fade-leave { height: 96px; } </style></body></html>transition的使用
以上為各類狀態/過程對應的類名示意圖。
1.沒有名字的transition組件
<transition> <div> ...... </div></transition><style> .v-enter, .v-leave-to { ...... } .v-leave, .v-enter-to { ...... } ......</style>2.有名字的transition組件
如下代碼，該transition組件的name屬性為fade，那么應設置的動畫類名為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.自定義鉤子函數
<transition v-on:enter="enter" v-on:after-enter="after" v-on:leave="leave" ......> <div> ...... </div></transition>
methods: { enter: function (el) { ...... }, after: function (el) { ...... }, ......}官方文檔中的用法不止這幾種，這里只例舉了幾種簡單常用的。源碼在此
新聞熱點
疑難解答
