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

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

CSS transition (one way transition) based on props (styled components)

css

styled-components