Question

我具有以下样式化的组件：

const S = {};

S.MentionDiv = styled.div`
  height: ${props => props.mentionOpen ? '200px' : '0px'}
  transition: height .5s ease-in-out; // THIS WORKS BOTH WAYS (OPEN AND CLOSE)
`;

但是需要一种方法来使过渡仅从0px到200px（打开操作）发生，而不是相反。我希望它立即关闭。

我可以修改此代码来实现吗？

Answer 1

我认为您可以忽略将高度更改为0时的过渡

const S = {};

S.MentionDiv = styled.div`
  height: ${props => props.mentionOpen ? '200px' : '0px'}
  ${props => props.mentionOpen ? 'transition: height .5s ease-in-out;': ''} `;

基于道具（样式化组件）的CSS过渡（单向过渡）

1 个答案: