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的都对，结合他们的回答就可以了。