收藏
回答

css rotateY iOS

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS iOS 12 iPhone 6s , iPhone 7 7.0.3

- 当前 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>


最后一次编辑于  2019-03-22
回答关注问题邀请回答
收藏

2 个回答

  • 这个名字真的有十个字
    这个名字真的有十个字
    2022-04-28

    解决了吗,我也碰到这个问题,只要使用rotatey就会只显示一半

    2022-04-28
    有用
    回复
  • 铭锋科技
    铭锋科技
    2019-03-22

    来个代码片段

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-03-22
    有用
    回复 16
    • 2019-03-22

      https://developers.weixin.qq.com/s/ORDLS3mL7m7J

      大神,代码片段弄好了。但是真机才有问题。模拟器没问题的。这要怎么看问题呢?

      2019-03-22
      回复
    • 铭锋科技
      铭锋科技
      2019-03-22回复

      IOS真机表现和开发工具上一致就是你期望的对吗?

      2019-03-22
      回复
    • 铭锋科技
      铭锋科技
      2019-03-22回复

      可是你的代码片段经测试是与开发工具一致的哦


      2019-03-22
      回复
    • 2019-03-22回复铭锋科技

      嗯嗯,而且我们这个小程序已经上线了。搜索‘星会员’就能看到。虽说没数据,但是在首页下方的地图图标点进去,在地图中找找商户,如果能领到优惠券,首页就会有卡片列表了,点击卡片就能看到问题了。

      2019-03-22
      回复
    • 2019-03-22回复铭锋科技

      这个小程序已经迭代过版本,之前卡片翻转是没有问题的,这个版本在这个页面又加了一个动画,不知道是不是这个原因导致的。还是啥问题。。

      2019-03-22
      回复
    查看更多(11)
登录 后发表内容