用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

天下雪 2017-1-29 00:28

作者:赵吉彤,来自原文地址写在前面先给大家拜个年,祝大家鸡年大吉大利,工作顺顺利利,家庭和和睦睦,新年无 BUG!!1月9日,微信正式发布微信小程序,作为开发人员,除了关注技术方面的一些创新与壁垒,也要多用 ...

作者:赵吉彤,来自原文地址

写在前面

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

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

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

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

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

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

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

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

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

安装

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

使用

  • 首先在你想引入 「Ripples.wxss」 动效的 「element」 上加 「ripple」 class。
  • 如果你想让他循环不断播放,请添加 「infinite」 class。
  1. <view class="ripple infinite bounce">element</view>
  • 接下来你需要再添加如下你需要的 class (例如上面例子中的 「bounce」)、相应 class 列表可参考 这里,或者 Animate.css

使用实例

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

也可以参考如下的例子:

  1. //imdex.js
  2. Page({
  3. data: {
  4. bounceShow: false
  5. },
  6. showBounce: function () {
  7. let that = this
  8. that.setData({
  9. bounceShow: true
  10. })
  11. setTimeout(function() {
  12. that.setData({
  13. bounceShow: false
  14. }, 2000)
  15. })
  16. }}
  1. /* imdex.wxss */
  2. @import "ripples.wxss";
  1. <!--index.wxml-->
  2. <view class="ripple {{bounceShow ? bounce:''}}">bounce</view>

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

个性化引入

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

如下:

  • 你需要安装 「gulp」 和其他依赖。
  1. $ cd path/to/Ripples.wxss/
  2. $ sudo npm install
  • 你可以执行 「gulp」 命令,来生成 「ripples.wxss」和 「ripples.min.wxss」 文件,具体包含哪些请参见并修改根目录下的 「ripples-config.json」 文件。
  1. "bouncing_entrances": [
  2. "bounceIn",
  3. "bounceInDown",
  4. "bounceInLeft",
  5. "bounceInRight",
  6. "bounceInUp"
  7. ]

最后

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

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 赵吉彤 来自: 原文地址

相关阅读