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

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

1 回复

leiqiu1 楼5 年前

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

<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 了

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