溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何在Vue中利用transition對組件進行封裝，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
<!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) {
......
},
......
}上述內容就是如何在Vue中利用transition對組件進行封裝，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
