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;
}
修改弹窗样式:
文章来源:https://www.toymoban.com/news/detail-528357.html
即可看到不同的弹窗动画效果文章来源地址https://www.toymoban.com/news/detail-528357.html
到了这里,关于微信小程序使用animation.css的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!