关于flex布局下，过渡动画不生效的问题
发布于 6 年前 作者 vqian 3061 次浏览 来自 问答
  • 当前 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;
}
1 回复

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

回到顶部