小程序动画

效果：点击开启旋转180度显示关闭（如图）

实现过程

1.这是html

<view class='expriment-content'>
  <view class='flips'>
    <view class='flip b1' animation="{{animationMain}}" bindtap='roateTap' data-id='1'>
      <text>开启</text>
    </view>
    <view class='flip b2' animation="{{animationBack}}" bindtap='roateTap' data-id='2'>
      <text>关闭</text>
    </view>
  </view>
</view>

2.这是css

page {
  width: 100%;
  height: 100%;
}

.expriment-content {
  width: 100%;
  height: 100%;
}

.flips {
  position: relative;
}

.flip {
  width: 66px;
  height: 66px;
  line-height: 66px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50px;
  transition: all 1s;
  backface-visibility: hidden;
}

.b1 {
  background-color: pink;
}

.b2 {
  background-color: skyblue;
  transform: rotateY(-180deg);
}

3.这是js

 data: {
    animationMain: null,
    animationBack: null
  },

  roateTap: function(e) {
    console.log(e)
    let id = e.currentTarget.dataset.id;
    this.animation_main = wx.createAnimation({
      duration: '400',
      timingFunction: 'linear'
    })
    this.animation_bank = wx.createAnimation({
      duration: '400',
      timingFunction: 'linear'
    })

    if (id == 1) {
      // 点击正面
      this.animation_main.rotateY(180).step()
      this.animation_bank.rotateY(0).step()
      this.setData({
        animationMain: this.animation_main.export(),
        animationBack: this.animation_bank.export(),
      })
    } else {
      this.animation_main.rotateY(0).step()
      this.animation_bank.rotateY(-180).step()
      this.setData({
        animationMain: this.animation_main.export(),
        animationBack: this.animation_bank.export(),
      })
    }
  },

属性总结：

1. backface-visibility：隐藏被旋转的 div 元素的背面

属性值：

visible ：背面是可见的。

hidden：背面是不可见的。

2. transform: rotateY(-180deg); 旋转180度后，背面

猜你喜欢