目录

　　animate.css官网

　　可以通过以下的内容，

　　1 路由动画transition或者在组件中控制使用animate

　　npm install animate.css

　　import 'animate.css/animate.min.css' //引入动画

　　在需要切换路由的页面中添加如下内容

　　html

　　css

　　.router_animate-enter-active {

　　animation: slideInLeft 0.5s;

　　}

　　.router_animate-leave-active {

　　animation: slideOutLeft 0.3s;

　　}

　　1.2 呈现结果

　　2 用于组件

　　控制类名是否加在元素上，值得注意的是，元素前面要加上的前缀，下图：控制是否显示这个动画，为的时候

　　const flipinIn = ref(false);

　　animate.css实现

动画文字

　　2.1 呈现结果

　　到此这篇关于Vue3 路由页面切换动画 animate.css效果的文章就介绍到这了,更多相关Vue3 路由页面切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: