- 当前 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;} |
做过尝试，当transition属性改为 all 时，动画正常触发。但是想搞清楚这个bug是小程序的问题还是平台CSS支持的差异问题