fix(accordion): Accordion组件默认开启的状态时 state wrapperHeight 初始设置为0会导致动画错误

[leidenglai]

wrapperHeight默认值 0时，toggleWithAnimation设置startHeight时 会导致css3错误触发动画；现在的示例第二个就有这个问题：https://taro-ui.jd.com/#/docs/accordion 。 fix: 将组件的state wrapperHeight 默认值设置为 ’unset‘，可以防止toggleWithAnimation方法设置初始高度是错误的出现动画。 希望采纳，或者用更优雅的方式解决下，谢谢

[b2nil]

问题

如果一个页面使用了两个以上 AtAccordion 组件， toggleWithAnimation(): void 获取到的高度永远是第一个 AtAccordion 组件的 '.at-accordion__body' 高度。

当第一个 AtAccordion 组件内容较少（即高度较矮）时， 其他 AtAccordion 组件展开或收起时的动画会异常，默认开启时会快速收起， 默认关闭时， 展开或收起时，动画到达第一个 AtAccordion 组件的高度后，就会一下变快。

当第一个 AtAccordion 组件的高度较高时，就会发现高度矮的 AtAccordion 组件的动画效果会溢出到空白的区域。

private toggleWithAnimation(): void {
    const { open, isAnimation } = this.props
    if (!this.isCompleted || !isAnimation) return

    this.isCompleted = false
    delayQuerySelector(this, '.at-accordion__body', 0).then(rect => {
        const height = parseInt(rect[0].height.toString())
        ...
    })
}

建议

可以在这里加一个动态 id：

<View id="{uniqueDynamicID}" className='at-accordion__body'>{this.props.children}</View>

然后在 toggleWithAnimation(): void 中获取该 id 的高度, 确保拿到具体 AtAccordion 组件的高度：

delayQuerySelector(this, `#{uniqueDynamicID}.at-accordion__body`, 0).then(rect => {
   const height = parseInt(rect[0].height.toString())
   ...
})

[yuwangjuan]

添加.at-accordion__content的height：auto !important 覆盖原本height，亲测有效