mpvue使用animation.js 方法实现卡片翻转，设置背景

最近自己在做小程序使用mpvue快速搭建，需要实现卡片翻转的效果

   ## 第一步 引入animation   
       npm install animate.css --save
       下在完成后 在所用到动画的页面引入 animate.css 
       我是在main.js中引用

import animate from 'animate.css'
Vue.use(animate)

就此页面已经引用了animate，接下来看如何使用它

 <div  style="background-image: url({{backgroundimg}});width:100%;min-height:100%;background-size:100% 100%;" > 
 //此为设置背景图片
  <div class="container main">
    <div class="card card1" data-id="1" @click="rotateFn" :animation="animation1">
    <image src="/static/images/xx1.png"></image>
    </div>//正面所用图片
    <div class="card card2" data-id="2" @click="rotateFn" :animation="animation2">
    <image src="/static/images/xx2.png"></image>
    </div>//背面所用图片
   </div>
  </div>

图片view建立完成 在data里面创建两个 变量用于控制反转，再建立一个animation的实例用于赋值，达到旋转的效果

	  animation1: null, // 正面
      animation2: null, // 背面
      animation: wx.createAnimation({
        duration: 1000,
        timingFunction: 'linear'
      }),
      backgroundimg: '/static/images/xxxxbgimg.jpg',//背景图片

//PS 背景图片PC端正常，但是有时手机端显示不正常，可以选择网络图片 或使用以下方法转换bsae64

 let base64 = wx.getFileSystemManager().readFileSync(this.backgroundimg, 'base64')
 this.backgroundimg = 'data:image/png;base64,' + base64

核心方法

    rotateFn (e) {
      let that = this
      let id = e.mp.currentTarget.dataset.id
      // 点击正面
      if (id === '1') {
        console.log(this.animation1)
        this.animation1 = that.animation.rotateY(180).step().export() 
        this.animation2 = that.animation.rotateY(0).step().export()
        console.log(this.animation1)
      } else { // 点击反面
        console.log('进了222222')
        this.animation1 = that.animation.rotateY(0).step().export()
        this.animation2 = that.animation.rotateY(180).step().export()
      }
    }

点击效果图 即可实现翻转