Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

leidenglai
Copy link

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

@leidenglai leidenglai changed the title fix(accordion): Accordion组件默认开启的状态时 state height 初始为0 导致动画错误 fix(accordion): Accordion组件默认开启的状态时 state wrapperHeight 初始设置为0会导致动画错误 Apr 27, 2020
@Garfield550 Garfield550 self-requested a review April 27, 2020 05:32
@b2nil
Copy link

b2nil commented Sep 21, 2020

问题

如果一个页面使用了两个以上 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
Copy link

yuwangjuan commented Aug 16, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants