我有一个 ReactJS 固定高度的子组件,我想使用 transition: height
对其进行动画处理。
.slider-enter {
height: 0;
}
.slider-enter.slider-enter-active {
height: 3pc;
transition: height 1s ease-in;
}
.slider-leave {
height: 3pc;
}
.slider-leave.slider-leave-active {
height: 0;
transition: height 1s ease-in;
}
这很好用,但是有问题的组件也有一个 border-top
和一些 padding-top
。这不包括在高度过渡中,因此过渡不平滑。
例如:在“输入”时,边框和填充立即可见,然后组件的其余部分按预期显示。
我的问题:
如何在 transition: height
规则中包含填充和边框的高度,或者是否有任何其他方法可以消除此问题?
任何后 jsbin 世界的源副本:
react 组件:
var Box = React.createClass({
getInitialState: function () {
return {
open: false
};
},
render: function () {
var stuffs = this.state.open ? <div className="sub" /> : null;
return (
<div className="box">
<button onClick={this.toggle}>Click Me</button>
<span>{'Open: ' + this.state.open}</span>
<CssTransitionGroup transitionName="slider">
{stuffs}
</CssTransitionGroup>
</div>
);
},
toggle: function () {
this.setState({
open: !this.state.open
})
}
});
CSS:
.box {
width: 100%;
height: 200px;
background-color: orange;
clip: rect(10px 20px 20px 0px);
}
.sub {
height: 3pc;
background-color: lime;
overflow: hidden;
border-top: 4px solid black;
padding-top: 50px;
}
.slider-enter {
height: 0;
}
.slider-enter.slider-enter-active {
height: 3pc;
transition: height 1s ease-in;
}
.slider-leave {
height: 3pc;
}
.slider-leave.slider-leave-active {
height: 0;
transition: height 1s ease-in;
}
最佳答案
你有两个选择:
- 过渡边框和填充,使它们全部折叠在一起。
- 将目标 div 包裹在一个新容器中,并为其高度设置动画。您将需要
overflow: hidden;
。
关于javascript - CSS 过渡高度和填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32548783/