基于react的高度过渡组件

2023年4月8日 170次阅读 来源: LiZ2z

开辟中，最贫苦的过渡结果就是高度过渡。由于过渡结果须要设置一个肇端状况和完毕状况，然则关于web中的元素来讲，容器高度大部分是依据内部元素自动撑起来的，这时候很难去设置一个稳固的过渡高度。所以我写了一个基于react的组件来自动完成高度过渡这一完成。

运用方法：

  1. 起首npm install react-auto-height-transition -S
  2. 详细运用：
import {
    TransitionWhenHeightChange,
    TransitionWhenToggle
} from 'react-auto-height-transition';

// 在元素显现隐蔽时举行过渡
<TransitionWhenToggle duration={300} timeFunction={'ease'}>
  {
    this.state.show && (
      <div>
        placeholder<br/>
        placeholder<br/>
        placeholder<br/>
        placeholder<br/>
      </div>
    )
  }
</TransitionWhenToggle>
// 设置一个最小高度，然后切换举行过渡。一般用于 检察更多 显现概况
<TransitionWhenHeightChange height={this.state.shouldCollapsed ? 20 : null} duration={300} timeFunction={'ease'}>
    <div>
        placeholder<br/>
        placeholder<br/>
        placeholder<br/>
        placeholder<br/>
      </div>
</TransitionWhenHeightChange>

github地点：auto-height-transition

    原文作者：LiZ2z
    原文地址: https://segmentfault.com/a/1190000017487017
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞