Ripples.wxss——微信小程序css库

作者：赵吉彤，来自原文地址

写在前面

先给大家拜个年，祝大家鸡年大吉大利，工作顺顺利利，家庭和和睦睦，新年无 BUG！！

1月9日，微信正式发布微信小程序，作为开发人员，除了关注技术方面的一些创新与壁垒，也要多用多看，分析这些小程序的优点与不足，有时候作为一个 web 前端，也十分需要 UI/UX 方面敏锐的嗅觉。

今天我们来说说小程序的 UX (或者说：微交互)。团队的技术水平决定产品的下限，对微交互的极致追求决定了产品的上限。

举个简单的例子：我们在使用 wx,showModal(obj) 、并且交互层级分明的情况下，可以给底层加一个 「高斯模糊」，例如：

<view class="page {{isBlur ? 'blur':''}}">
.blur {filter: blur(6rpx);}

有时候几行简单的代码就能给一款产品带来高一个层次的体验。

下面说我们今天的重头戏，为微信小程序定制的 css3 动效库 Ripples.wxss

希望大家不要吝惜自己的 star~ 。

声明：其中大部分动效来自 Animate.css

安装

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

npm install ripples.wxss --save

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

使用

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

<view class="ripple infinite bounce">element</view>

• 接下来你需要再添加如下你需要的 class (例如上面例子中的 「bounce」)、相应 class 列表可参考 这里，或者 Animate.css

使用实例

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

• 

也可以参考如下的例子：

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

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

<!--index.wxml-->
<view class="ripple {{bounceShow ? bounce:''}}">bounce</view>

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

个性化引入

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

如下：

• 你需要安装 「gulp」 和其他依赖。

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

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

"bouncing_entrances": [
    "bounceIn",
    "bounceInDown",
    "bounceInLeft",
    "bounceInRight",
    "bounceInUp"
  ]

最后

文章如有不当，请各位批评指正。

欢迎大家关注我的专栏：知乎专栏-代码小白的日常

照旧放上 GIthub 地址：jeasonstudio/Ripples.wxss