Ripples.wxss 是一个为微信小程序量身定制的 css3 动效库

Ripples.wxss 是一个为微信小程序量身定制的 css3 动效库

Ripples.wxss

Ripples.wxss 是一个为微信小程序量身定制的 css3 动效库，引领微交互的潮流。大部分动效源自 Animate.css。

安装

如果你的微信小程序项目基于 nodejs 开发，你可以使用 npm 安装，并拷贝到相关目录后 @import

npm install ripples.wxss --save

或者直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxss.git，拷贝 ripples.wxss 或 ripples.min.wxss到相关目录后 @import

使用

首先在你想引入 Ripples.wxss 动效的 element 上加 ripple class。 如果你想让他循环不断播放，请添加 infinite class。

element

接下来你需要再添加如下你需要的 class：

bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceIn-bounceInDown-bounceInLeft-bounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDown-fadeInDownBigfadeInLeft-fadeInLeftBigfadeInRight-fadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp

具体样式可以参考 Animate.css。

使用实例

你可以查看根目录下的 DEMO 项目，为所有 Ripples.wxss 的综合展示：

也可以参考如下的例子：

//imdex.jsPage({ data: { bounceShow: false }, showBounce: function () { let that = this that.setData({ bounceShow: true }) setTimeout(function() { that.setData({ bounceShow: false }, 2000) })}}

/* imdex.wxss */@import "ripples.wxss";

bounce

不同场景下的使用逻辑还请自行斟酌。

个性化引入

Ripple.wxss 使用 gulp.js 进行 wxss 的格式化和压缩，所以你也可以用它来个性化生成 Ripples.min.wxss 后引入，以避免代码冗余。

你需要安装 gulp 和其他依赖

$ cd path/to/Ripples.wxss/$ sudo npm install

你可以执行 gulp 命令，来生成 ripples.wxss ripples.min.wxss 文件，具体包含请参见并修改根目录下的 ripples-config.json 文件。

"attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "headShake": true, "swing": true, "tada": true, "wobble": true, "jello":true}

开源协议

MIT

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。