Vue3实战笔记(26)—有趣的动画——transition
前言
学习了几天路由,今天
放松一下,来点有趣的事情,给路由加个动画。
一、路由动画切换
官方文档是这样说的,在想要跳转的路由外面加一层:
然而:
动画是可以自己定义的,然后在style中:
其中,name的作用就是定义你style的开头名称,默认是v开头,例如:
v-enter-active替换成了fade-enter-active
试试去吧非常炫酷!
总结
在 Vue 中添加路由动画,可以使用 Vue 的内置过渡效果结合 Vue Router,可以定义各种各样的动画,提高用户体验,Vue Router 的过渡效果还可以更加复杂和精细,比如可以根据不同的路由使用不同的过渡效果,或者在多个组件之间进行过渡。后面会实战几种好看的动画和详细的使用方法以及源码。
你要相信,看似不起波澜的日复一日,会突然在某一天让人看到坚持的意义。