Vue中的transition封裝組件的實(shí)現(xiàn)方法
更新時(shí)間：2019年08月13日 09:42:54 作者：StarlightUnion
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
vue版本信息：2.5.2
問(wèn)題起源于使用Vue做網(wǎng)站時(shí)涉及到的一個(gè)小部件顯示動(dòng)畫(huà)，閱讀了Vue的文檔后結(jié)合網(wǎng)上各位的經(jīng)驗(yàn)，花了點(diǎn)時(shí)間研究了下。
最終的效果如上圖所示，當(dāng)鼠標(biāo)移入灰色方塊時(shí)彈出層會(huì)至上而下顯示出來(lái)，類似于 拉鏈?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)入和離開(kāi)時(shí)過(guò)渡狀態(tài)的 動(dòng)畫(huà)狀態(tài) */
.fade-enter-active, .fade-leave-active {
transition: all .10s ease;
height: 96px;
}
/* 進(jìn)入時(shí)的 初始狀態(tài) 和 離開(kāi)時(shí)動(dòng)畫(huà)的 結(jié)束狀態(tài) */
.fade-enter, .fade-leave-to {
height: 0;
}
/* 離開(kāi)時(shí)的 初始狀態(tài) 和 進(jìn)入時(shí)動(dòng)畫(huà)的 結(jié)束狀態(tài) */
.fade-enter-to, .fade-leave {
height: 96px;
}
</style>
</body>
</html>
transition的使用
以上為各類狀態(tài)/過(guò)程對(duì)應(yīng)的類名示意圖。
1.沒(méi)有名字的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è)置的動(dòng)畫(huà)類名為fade-enter，其他的類名也是如此。
<transition name="fade">
<div>
......
</div>
</transition>
<style>
.fade-enter, .fade-leave-to {
......
}
.fade-leave, .fade-enter-to {
......
}
......
</style>
3.自定義過(guò)渡類名
<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) {
......
},
......
}
官方文檔中的用法不止這幾種，這里只例舉了幾種簡(jiǎn)單常用的。源碼在此
相關(guān)文章
這篇文章主要介紹了vue-cli項(xiàng)目中使用Mockjs詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開(kāi)發(fā)很常用的一個(gè)功能,在Vue開(kāi)發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
本文給大家總結(jié)ES6新特性：默認(rèn)參數(shù)、reduce、解構(gòu)賦值和Set在使用時(shí)的一些小技巧。需要的朋友參考下吧2018-04-04
基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue之Axios的異步通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了Vue中的高德軌跡回放問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
相信很多人在用Vue使用別人的組件時(shí),會(huì)用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),這篇文章主要給大家介紹了關(guān)于Vue中Vue.use()的原理及基本使用的相關(guān)資料,需要的朋友可以參考下2021-10-10