小程序
小游戏
企业微信
微信支付
扫描小程序码分享
请问一下 这种动画效果怎么实现
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
哇，我最近也遇到了这个问题， 我是这样弄的
<!-- wxml -->
<
view
class
=
"page1"
animation
"{{animation1}}"
>页面1</
>
<view class="page2" animation="{{animation2}}">页面2</view>
"page2"
"{{animation2}}"
>页面2</
/* wxss */
.page
1
{
background
:
red
;
}
2
blue
transform: rotateY(
90
deg);
// 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()
page1Out.rotateY(90).step()
page2In.rotateY(0).step()
this.setData({ animation1: mainOut.export(), animation2: menuIn.export() })
this
.setData({
animation1: mainOut.export(),
animation2: menuIn.export()
但是这样的话就无法将不显示的菜单设为 display:none 了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
第一段动画(actualAnimation.rotateY(90).step())执行完之后 要还原一下(actualAnimation.rotateY(0).step()) 在执行下一组动画
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
哇，我最近也遇到了这个问题， 我是这样弄的
<!-- wxml --><viewclass="page1"animation="{{animation1}}">页面1</view><viewclass="page2"animation="{{animation2}}">页面2</view>/* wxss */.page1{background:red;}.page2{background:blue;transform: rotateY(90deg);}// javascriptdata: {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()
})}第一段动画(actualAnimation.rotateY(90).step())执行完之后 要还原一下(actualAnimation.rotateY(0).step()) 在执行下一组动画