请问一下 这种动画效果怎么实现
发布于 6 年前 作者 naqian 7395 次浏览 来自 问答

请问一下 这种动画效果怎么实现

1 回复

哇，我最近也遇到了这个问题， 我是这样弄的

<!-- wxml -->
<view class="page1" animation="{{animation1}}">页面1</view>

<view class="page2" animation="{{animation2}}">页面2</view>


/* wxss */
.page1 {
    background: red;  
}
.page2 {
    background: blue;
    transform: rotateY(90deg);
}

// javascript

data: {

 animation1: null,

 animation2: null

},


onShow: function() {

 const page1Out = wx.createAnimation({

   duration: 1000

 })

  const page2In  = wx.createAnimation({

    duration: 1000,

    delay: 1000

  })


 page1Out.rotateY(90).step()
  page2In.rotateY(0).step()


  this.setData({
    animation1: mainOut.export(),
    animation2: menuIn.export()
  })


}


但是这样的话就无法将不显示的菜单设为 display:none 了
回到顶部