推荐一个好用的动画库Animate.css

看到一些电商应用，在添加商品到购物车时，都会有一个动画。

知道是用css实现，但没有自己写过帧，偶尔发现一个好用的库，正如它的名称所展示的，它就是专门做动画的，传递门https://daneden.github.io/animate.css/

特效特别种类的多，就像是幻灯片切换效果

cart-animation.gif

我从里面找出自己所需要的购物车跳动bounceIn效果，移植到自己的灵犀微商城里，就有了以下的效果

animate.gif

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
  animation-duration: 1.25s;
}

相应的wxml文件加个一个变量{{animate}}关联它的生效与否就可以了。

<image src="../../images/icon_cart.png" class="button-image {{animate}}" />

而js代码中就是先添加移除样式再添加样式，好比jQuery中的removeClass().addClass()

     addCart: function() {
+       this.setData({
+           animate: ''
+       });
        api.addCart(this.data.goods);
+       this.setData({
+           animate: 'bounceIn'
+       })
    },

除Animate.css，还有一个动画库也常提起，http://vivify.mkcreative.cz/，不妨也试一试。

mp