微信小程序使用animation.css

animation.css是一款纯css动画库，其中提供了丰富的动画效果

我们直接下载animation.css，即可使用其中的样式

其官网为：Animate.css | A cross-browser library of CSS animations.

1.下载

使用npm下载animation.css：

npm install animation.css -g

注：-g是全局下载，如果需要把package的信息写入package.json文件的话，可以使用-save参数，参考官网：

当然，这样下载安装的前提是你已经配置好了nodejs环境，如果还没有配置好，可以参考：

Vue 2.0 学习笔记——day01（环境配置+入门）_THE WHY的博客-CSDN博客

这篇文章中的nodejs安装配置部分：

或者也可以直接从该网址下载：https://gitee.com/wu-haoyi/tools/blob/master/Wechat/animate.css

2.配置

将下载下来的animate.css放入微信小程序的某一目录下（根据自己情况而定）

并改名为animate.wxss

之后将其中的 :root 修改为 page ：

保存即可

然后可以在app.wxss中导入该文件：

或者你哪一个页面的样式需要使用animate.css，就在哪一个页面的wxss文件中import也可

在app.wxss中导入即是全局样式，所有页面均可使用

接下来我们就可以使用了

3.使用

目前的版本是v4.1.1，样式前缀为animate__animated

我们想要使用的动画效果的class名可以从官网找到：

选中你想要的样式，复制其class name即可

示例：

使用bounce动画效果，则

class="animate__animated animate__bounce"

4.一个demo

index.html：

<view class="hidden"></view>
<view class="pops animate__animated animate__jello">
<text>这是一个弹窗</text>
</view>

index.wxss：

.hidden{
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
    background-color: gray;
}

.pops{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 25%;
    z-index: 1;
    width: 400rpx;
    height: 400rpx;
    background-color: white;
}

修改弹窗样式：

即可看到不同的弹窗动画效果