Question

我有一个styled-component，如下所示：

const Wrapper = styled.div`
  display: flex;
  width: 100%;
  justify-content: center;
  opacity: ${props => (props.show ? "1" : "0")};
  height: ${props => (props.show ? "100%" : "0")};
  padding: ${props => (props.show ? "15px 0px" : "0 15px")};
  -webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  -ms-transition: all 2s ease-out;
  transition: all 2s ease-out;

  p {
    margin: 0;
  }
`;

与prop'show'配合正常。问题是“包装器” div位于顶部。其他所有元素都在“包装器”之下。当“显示”变为false时，transition ease-out有效。但是，当动画完成时，“包装器”下方的元素会跳到顶部并占用可用空间。

我尝试使用属性height和max-height代替了all中的transition，但是得到了相同的结果。

Sandbox example

如何解决Wrapper下的元素与ease-out协调地位于顶部的问题？

如何修复CSS跳变动画？

0 个答案: