2021-12-09 如何简单添加酷炫动画

可以前往官方网站

https://animate.style/#best-practices

接下来是如何在项目中引用

首先拥有一份animate.min.css文件 放入到public>static>css中

再将链接带入到_document.js中

          <link rel="stylesheet" href={`${Url.cdnHost}/static/css/animate.min.css?v=${date}`} />

其中cdnHost代表在开发或测试环境下的前缀

let cdnHost = process.env.NODE_ENV === 'production' ? 'https://cdn7......' : '';

接下来就是精彩的环节

直接在你需要动画的类名下添加animation css样式

.twenty{
      position: absolute;
      top: 10vw;
      left:10vw;
      width: 22vw;
      animation: bounceInLeft;   //名称
      animation-duration: 2s;    //过程所用时间
    }

名称可直接去官网粘贴复制，但要去掉前面的animate_前缀

这里复制后得到是animate__fadeInDownBig 所以名称我们只要后半段

就大功告成了

还有一种的方法是官网的示例，先安装下载，再引入

我的文件无法直接引用

我在其他博主那里截图的