javascript - CSS 过渡高度和填充

标签 javascript css reactjs css-animations

我有一个 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。这不包括在高度过渡中,因此过渡不平滑。

例如:在“输入”时,边框和填充立即可见,然后组件的其余部分按预期显示。

Jsbin example

我的问题:

如何在 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/

相关文章:

css - 如何在没有响应的情况下制作设备友好的网站

html - Bootstrap 3 嵌套模态——背景 z-index 和点击关闭模态

javascript - 将 ownProperty 对象添加到 Object 的原型(prototype)时出错

javascript - 如何更改 Angular 中悬停时的图标?

javascript - 如何防止在 Chrome 中调整图像大小时模糊?

html - 我可以使用 CSS 在视口(viewport)中垂直居中固定高度的 DIV 吗?

css - react native : Adding borderColor creates subtle box shadow

javascript - 在 react-router 中用连字符匹配路由

javascript - createStore如何从redux中的reducer函数中提取initialState?

javascript - 有没有一种方法可以减慢 for-loop/forEach 中的 async-await fetch 调用以避免每秒 API 配额?