Vue transition Css3动画原理

https://www.cnblogs.com/xiaohuochai/p/7372665.html   animate.css的使用

https://daneden.github.io/animate.css/  下载animate.css

 123 

	
		

           
                

                    hello world
            
           
           切换
		
		

//transition有 in-out 和 out-in两种模式 推荐第二种

   

/* 进入开始 */
.v-enter{
  opacity: 0;
}
/* 进入结束 */
.v-enter-to{
  opacity: 1;
}
/* 进入持续时间 */
.v-enter-active{
  transition: 1s;
}
/* 离开开始 */
.v-leave{
    opacity: 1;
}
/* 离开结束*/
.v-leave-to{
    opacity: 0;
}
/* 离开持续时间 */
.v-leave-active{
    transition: 1s;
}

动画封装

	
		

           
               
hello world
           
           Add