uniapp 折叠动画 ＜transition＞ 踩坑记录

一.问题复现

<transition name="collapse">

<view v-show="isOpen" class="collapse-grid">

<view v-for="n in 11,12" :key="n" class="tool-item">功能{{ n }}</view>

</view>

</transition>

.collapse-grid {
    width: 100%;
    background: red;
// 这里如果加flex 布局, 里面的内容会直接出来,不受折叠面板控制
    display: flex;
}


.collapse-enter-active,
.collapse-leave-active {
  transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out;
  overflow: hidden;
}
.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
  opacity: 0;
}
.collapse-enter-to,
.collapse-leave-from {
  max-height: 600rpx;
  opacity: 1;
}

原因是 在小程序中,父容器是flex时,子元素的max-height变化不会触发布局动画

子元素的max-height不参与flex计算,因此不会引发动画过渡

动画帧直接跳到了最终状态,看起来就是无动画