1. 首先第一步:
npm 或 yarn 安装 :
npm install animate.css --save
yarn add animate.css
(扩展)HTML引入:在HTML中使用
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
2. 安装之后,下一步: 引入
例: vue中: import 'animate.css/animate.min.css';
3. 下一步:
- transition包裹
<transition name="animate__animated animate__flipOutY animate__delay-2s">
<router-view/>
</transition>
致此动画实现:
更多动画效果:https://www.dowebok.com/demo/2014/98/
效果展示: