成大事不在于力量的大小,而在于能坚持多久。

vue 在vue项目中使用动画 transition

 transition动画具体的使用场景有两种:

1,在页面种给局部元素添加 transition过度效果;

2,在路由 router-view里添加,在页面切换的时候会有动画效果 给页面的某个元素添加过度效果;

给页面的某个元素添加过度效果

<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;等只有一种或两种状态的属性,

posted @ 2021-01-28 15:00  雪绒花1124  阅读(456)  评论(0)    收藏  举报