基于 Prop (样式化组件)的 CSS 过渡(单向过渡)

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;': ''} `;