React：渲染元素時如何應用 CSS 過渡效果？

Question

我有一個復選框，選中后會顯示部分表單，例如：

                        <label>
                            <input
                                name="postalAddressNeeded"
                                type="checkbox"
                                value={this.state.postalAddressNeeded}
                                onChange={this.handlePostalCheckChange}
                            />
                            My postal address is different my residential address
                        </label>

                        {postalAddressNeeded &&
                            <div>
                                <AddressAutocomplete />
                            </div>
                        }
                    </div>
                    }

這可行，但我想在選中復選框時將其設置為向下滑動的動畫。 為此，我創建了：

{postalAddressNeeded &&
  <div className={`js-inactive ${postalAddressNeeded ? 'js-slide-down-show' : 'js-slide-down-hide'}`}>
   <AddressAutocomplete />
  </div>
}

在我的 CSS 中：

.js-inactive {
    height: 0px;
}

.js-slide-down-show {
    height: auto;
    -webkit-transition: height .3s ease;
}

.js-slide-down-hide {
    height: 0px;
    -webkit-transition: height .3s ease;
}

但這不起作用 - 元素仍然出現但沒有動畫。

我已經研究了使用react-transition-group插件執行此 IE 的其他方法，但它看起來確實適用於渲染元素。

有誰知道實現這一目標的方法嗎？

Answer 1

這是 小沙箱，在 styles 中有一些解釋。

評論里coot3和Servesh Chaturvedi的都對，結合他們的回答就可以了。