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