由于微信小程序不支持CSS3过度属性transition，所以我们需要利用微信小程序api进行画面过度的展示

首先是官方示例：

wxml：

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

js:

Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
 
    this.animation = animation
 
    animation.scale(2,2).rotate(45).step()
 
    this.setData({
      animationData:animation.export()
    })
 
    setTimeout(function() {
      animation.translate(30).step()
      this.setData({
        animationData:animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale: functi