uniapp引用animate.css动画库

1.安装animate.css

$ npm install animate.css --save 

2.全局挂载

//app.vue

@import 'animate.css'

3.在页面中使用

在view中的class添加animate__animated 以及动画名   需要加上animate_  的前缀
<view class="animate__animated animate__bounceIn" ></view>

4.tips：我在使用时发现这样写并没起作用，在此记录解决思路

我发现animate.css中有使用css的全部变量，所以就测试全局变量有没有起作用

找到node_modules/animate.css/animate.css将其中的动画时间全部替换成1s

  animation-duration: var(--animate-duration);  ==>  animation-duration: 1s;

这样操作后，我发现动画效果正常出现，证明是这个问题，为了从根源上解决问题，把目光转移到了定义全局变量的地方

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

查看文档发现 :root 选择器相当于html 而在小程序当中是没有html的 于是乎修改一下

page {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

将:root修改成page，至此问题完美解决！