小道具(trueまたはfalse)に応じて上下にスライドするアニメーションコンポーネントがあります。私はmaxHeight:0を使用してコンポーネントを非表示にしています(遷移はCSSで行われています)。これはpropとして渡されるデフォルトの状態です。開かれたスタイルの場合、コンテンツが適切に収まるように、ちょうど必要以上に大きいmaxHeightを使用します。開かれた後、私はrefでその高さを取得し、それに応じてmaxHeightを設定することができます。それは開閉だ最初の時間が原因それは(多分開いた1オフスクリーンレンダリングし、必要以上のmaxHeightが大きいに滑らかではないレンダリングされた要素の高さを画面に表示する前に取得する(ReactJS)
:このアプローチの2つの問題がある
export default class AnimatedInput extends React.Component { constructor (props) { super(props); this.state = { height: 600 } } componentDidUpdate(prevProps) { var height = this.refs.inputNode ? this.refs.inputNode.clientHeight : height; console.log(height); if (this.props.open === false && prevProps.open === true) { this.setState({height: height}); } } render() { var {height} = this.state; let test = this.props.open ? 'boxVisible' : 'boxHidden'; var styles = { boxHidden: { ... maxHeight: 0, }, boxVisible: { .... maxHeight: height, } } return ( <div style={styles[test]} ref="inputNode"> {this.props.children} </div> ) } }
完全に開く前に閉じていると、それよりも低くなります(簡単な修正だと思いますが、高さの値を更新する必要はありません)。
私は適切なトラックにいますか?どのようにこれらを修正しますか?私はCSSに固執するか、おそらくJSで完全に移行するべきですか?あなたの提案をありがとう!
私はそれに遭遇しましたが、自分のコンポーネントを作成したかったのですが、私はそのフードの下で見ています。ありがとう! – jwm0