第九课 vue路由跳转加入过渡动画

第一步:给router-view显示外层加入一个transition标签

第二步:制定他的css懂法方案,name="fade"

在加入css代码:

第九课 vue路由跳转加入过渡动画_第1张图片

如何配合animate.css使用

1.下载css文件

2.放在项目的static文件夹中

3.在index.html中,用link引入,引入路径为"/static/animate.css"

4.在hi组件中写入样式

第九课 vue路由跳转加入过渡动画_第2张图片

当然也可以在修改一下过渡的细节

1.加入一个class=“rorange-router”

2.写上css

第九课 vue路由跳转加入过渡动画_第3张图片

3.修改进入的方式:

第九课 vue路由跳转加入过渡动画_第4张图片

离开之后再进入

你可能感兴趣的:(第九课 vue路由跳转加入过渡动画)