1.在頁(yè)面中給局部元素添加transition過渡效果
2.在路由router-view里添加蚌成,在頁(yè)面切換的時(shí)候會(huì)有過渡效果
3.只有name屬性,相當(dāng)于class類名
給某個(gè)元素添加過渡效果
<transition name="t1">
<div class="demo"></div>
</transition>
給路由切換添加過渡效果
<transition name="t1">
<router-view></router-view>
</transition>
.t1-enter{// demo元素顯示動(dòng)畫 開始狀態(tài)的效果i的css
opacity:0;
}
.t1-enter-acitve{//active用于添加過度時(shí)間,插入過程
transition:all 2s;
}
.t1-leave-active{//添加過度時(shí)間凛捏,離開過程
transition:all 2s;
}
.t1-leave-to {//to 結(jié)束動(dòng)畫時(shí)担忧,結(jié)束狀態(tài)的效果
opacity:1 ;
}
注意:
transition的過度坯癣,不支持 display:none;和display:block;等只有一種或兩種狀態(tài)的屬性,