收藏
回答

关于flex布局下,过渡动画不生效的问题

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug iOS iOS 12 iphone8 7.0.0

- 当前 Bug 的表现(可附上截图)


ios平台下蓝色区域的高度没有过渡动画,安卓客户端和开发工具上都有过渡动画

- 预期表现

当点击白色区域时,蓝色区域的高度变化有过渡动画

- 复现路径

安卓手机过渡动画正常

ios均没有过渡效果




- 提供一个最简复现 Demo

<view class="container">
  <view bindtap="handleTap" class="im-main"></view>
  <view class="im-keyborad-holder" style="{{style}}"></view>
</view>
Page({
  data: {
    style: "flex-basis: 300rpx;"
  },
  onLoad() {
    setTimeout(() => {
      this.setData({ style: "flex-basis: 500rpx;" })
    }, 2000)
  },
  handleTap() {
    if (this.data.style == "flex-basis: 0;") {
      return this.setData({ style: "flex-basis: 500rpx;" })
    }
    this.setData({ style: "flex-basis: 0;" })
  }
})
page {
  height: 100%;
  font-family: PingFangSC-Regular;
  /* overflow: hidden; */
}
 
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
.im-main {
  position: relative;
  overflow: hidden;
  height: 100%;
  flex-basis: auto;
}
.im-keyborad-holder {
  background-color: blue;
  flex-basis: 200rpx;
  transition: flex-basis 500ms;
}


最后一次编辑于  01-10
回答关注问题邀请回答
收藏

1 个回答

  • 胡泽涵
    胡泽涵
    01-10

    做过尝试,当transition属性改为 all 时,动画正常触发。但是想搞清楚这个bug是小程序的问题还是平台CSS支持的差异问题

    01-10
    赞同
    回复