1.在页面中给局部元素添加transition过渡效果
2.在路由router-view里添加,在页面切换的时候会有过渡效果
3.只有name属性,相当于class类名
给某个元素添加过渡效果
<transition name="t1">
<div class="demo"></div>
</transition>
给路由切换添加过渡效果
<transition name="t1">
<router-view></router-view>
</transition>
.t1-enter{// demo元素显示动画 开始状态的效果i的css
opacity:0;
}
.t1-enter-acitve{//active用于添加过度时间,插入过程
transition:all 2s;
}
.t1-leave-active{//添加过度时间,离开过程
transition:all 2s;
}
.t1-leave-to {//to 结束动画时,结束状态的效果
opacity:1 ;
}
注意:
transition的过度,不支持 display:none;和display:block;等只有一种或两种状态的属性,