Question

<Accordion selected="2">
    <Accordion.Section title="Section 1" id="1">
        Section 1 content           
    </Accordion.Section>
    <Accordion.Section title="Section 2" id="2">
        Section 2 content         
    </Accordion.Section>
    <Accordion.Section title="Section 3" id="3">
        Section 3 content
    </Accordion.Section>
</Accordion>

http://jsfiddle.net/sm74cgew/17/

在这个手风琴示例中，当您单击单个面板时，会有一个简单的高度从0到100％的过渡。现在，当您单击第一个面板时，此功能非常有效。之后，由于它将前一个面板转换回0，因此存在“滞后”。

首先，当查看ReactCSSTransitionGroup时，输入/离开似乎是一个解决方案，但我没有DOM元素消失/进入此处。高度只是从0到100％调整。

我仍然希望有过渡效果，但我不希望出现奇数滞后。有什么建议？

我希望让它像jQuery的幻灯片一样工作http://jsfiddle.net/xyfgxvca/

Answer 1

使用CSS转换高度可能有点棘手，但你可以使用JS＆amp;反应而不是纯CSS。

1°。设置组件的初始高度

getInitialState: function(){
     return {height: 0}
}

2º将高度应用于截面的主体并设置参考

<div style={{height: this.state.height}} ref="body" className="body">

3º当支柱选择更改时更新组件高度

componentWillReceiveProps: function(nextProps){
         if(nextProps._selected !== this.props._selected){
           if(nextProps._selected){
              this.setState( {
                 height: React.findDOMNode(this.refs.body).scrollHeight
              });
           }
           else{
              this.setState( {
                 height: 0
              });
           }
        }
},

full working example

CSS百分比高度过渡滞后

1 个答案: