- 当前 Bug 的表现(可附上截图)
是一个会员卡的翻转效果:
我的做法是,一个view包含两个view (分别充当会员卡的正面和反面,对反面进行初始化翻转180deg,并且隐藏)。
动画加在外层view上。当动画完成后,对里面的正反面进行显示隐藏的交换。
bug:动画完成后,反面会员卡view变为一片空白。但是点击对应区域,还有响应。(卡片背面有对应的手机号,点击可以打电话)
安卓和模拟器都没毛病。iOS就有问题。
js 从正面->反面
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
})
animation.rotateY(90).opacity(0.5).step()
animation.rotateY(180).opacity(1).step()
this.setData({
animationData: animation.export()
})
var that = this;
setTimeout(function() {
that.setData({
cardFrontShow: "flex",
cardBackShow: "none",
cardFrontRotateY: '-180',
cardBackRotateY: '0'
});
}, 500);
html
<view class='card' animation="{{animationData}}">
<!-- 卡正面 -->
<view id='cardFront' bindtap='showCardBack' style='display: {{cardFrontShow}}; transform: rotateY({{cardFrontRotateY}}deg); background-image: url({{cardInfo.styleUrl}});'>
</view>
<!-- 卡背面 -->
<view id='cardBack' bindtap='showCardFront' style='display: {{cardBackShow}}; transform: rotateY({{cardBackRotateY}}deg); background-image: url({{cardInfo.styleUrl}});'>
</view>
</view>
解决了吗,我也碰到这个问题,只要使用rotatey就会只显示一半
来个代码片段
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
https://developers.weixin.qq.com/s/ORDLS3mL7m7J
大神,代码片段弄好了。但是真机才有问题。模拟器没问题的。这要怎么看问题呢?
IOS真机表现和开发工具上一致就是你期望的对吗?
可是你的代码片段经测试是与开发工具一致的哦
嗯嗯,而且我们这个小程序已经上线了。搜索‘星会员’就能看到。虽说没数据,但是在首页下方的地图图标点进去,在地图中找找商户,如果能领到优惠券,首页就会有卡片列表了,点击卡片就能看到问题了。
这个小程序已经迭代过版本,之前卡片翻转是没有问题的,这个版本在这个页面又加了一个动画,不知道是不是这个原因导致的。还是啥问题。。