微信小程序中关于wx.createAnimation的API的使用

Question

自己看了下文档和网上的例子就动手自己试了下想做个简单地右侧滑出层，但是并没有达到简单的动画效果，请大神指教下
HTML部分

<view class='wx-dailog' wx:if="{{wxdailog}}" animation="{{animationData}}" >
  <view class='configheader'>
    <view class='configback' bindtap='closeDailog'>
      <image src='../../static/back.png'></image>
    </view>
  </view>
</view>

CSS部分

.wx-dailog{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.configheader{
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;  
}
.configback{
  height: 50rpx;
  width: 50rpx;
}
.configback image{
  width: 100%;
  height: 100%;
}

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
      wxdailog:true,
      animationData:{

      }
  },
  closeDailog(){
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    this.animation = animation
    animation.translateX(0).step()
    this.setData({
      animationData: this.animation.export(),
      wxdailog: false
    })
  },
  showDailog(){
    
    
    this.setData({
      wxdailog: true
    })
  },


})