使用animates.css给你的vue路由加上切换动画

你有没有因为Vue自带的组件默认切换方式 感到难受么
那你来看菜鸟的这篇文章算是来对了。各位大爷里面请
因为本人的动画效果做的实在特别烂，就不在这里丢人了 直接用大神写好的动画哦
animate.css https://animate.style/ 官方地址 已经更新到 4.* 版本 不知不觉
让小菜鸟的我觉得技术这东西更新真的好快
然后 我用 vue-cli 创建了一个 初始化的脚手架项目 不要乱动什么就这个初始化项目 拿来当例子 最好了
点击上面home和about 来实现 组件的切换

默认是啥都没有的 这个不好看 哈 我们加上动画效果
把我们的动画 cdn 放入到 public 下的index.html文件引入

// 使用 transition 包括你的 router-view 路由组件
记住 和这个 mode="out-in"是 切换模式 当前组件 走完 下一个组件在进行表演 要不 就会出现一起表演的效果 有种怪怪的感觉 哈哈哈

enter-active-class=“animate__animated animate__bounceInLeft”
enter-active-class 这个是 vue的transition组件 自带的属性配置
animate__animated animate__bounceInLeft 则是 animate.css的格式要求

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><transition mode="out-in" enter-active-class="animate__animated animate__bounceInLeft"  leave-active-class="animate__animated animate__backOutRight"><router-view/></transition></div>
</template>

然后我们的动画效果就做完了 我们运行下 看下效果吧
好像有那么一回事了是把 本来 我想录个短视频 发上来呢 发现必须 是优酷 腾讯的 视频连接
我就去优酷发布了 下 却发现还得审核 我这暴脾气 哪能等他给我审核半天 很来气
就去下载个 gif制作工具 制作出来了 动态效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！