vue版本信息：2.5.2
問題起源于使用Vue做網(wǎng)站時(shí)涉及到的一個(gè)小部件顯示動畫，閱讀了Vue的文檔后結(jié)合網(wǎng)上各位的經(jīng)驗(yàn)，花了點(diǎn)時(shí)間研究了下。
最終的效果如上圖所示，當(dāng)鼠標(biāo)移入灰色方塊時(shí)彈出層會至上而下顯示出來，類似于 拉鏈?zhǔn)酱昂??)。
實(shí)例
實(shí)現(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)入和離開時(shí)過渡狀態(tài)的 動畫狀態(tài) */ .fade-enter-active, .fade-leave-active { transition: all .10s ease; height: 96px; } /* 進(jìn)入時(shí)的 初始狀態(tài) 和 離開時(shí)動畫的 結(jié)束狀態(tài) */ .fade-enter, .fade-leave-to { height: 0; } /* 離開時(shí)的 初始狀態(tài) 和 進(jìn)入時(shí)動畫的 結(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) { ...... }, ......}官方文檔中的用法不止這幾種，這里只例舉了幾種簡單常用的。源碼在此
新聞熱點(diǎn)
疑難解答
