TheSnegok
@TheSnegok

Как сделать правильно сделать анимацию показа/скрытия элемента в React при смене класса?

Есть вот такой JSX:
<div className={s.likesPreview}>
				{!image ?
					(
						<div className={s.likesPreviewNull}>
						</div>
					) : (
						<div className={s.likesPreviewWrapper}>
							{image && <img src={image} alt='preview-like-item' />}
						</div>
					)}
			</div>

где image это state с значением либо это путь к изображению либо null, это всё работает, я пытался сделать плавную анимацию при смене этих классов через opacity:
&Preview
		width: 19%
		height: 200px
		&Null
			height: 100%
			width: 100%
			opacity: 0
			transition: all 2s
			display: flex
			justify-content: center
			align-items: center
		&Wrapper
			height: 100%
			width: 100%
			opacity: 1
			transition: all 2s
			display: flex
			justify-content: center
			align-items: center
			img
				height: 90%

И вот когда кидает класс likesPreviewWrapper то плавное появление есть, а когда меняется на likesPreviewNull то нету, подскажите в чём проблема?
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ответы на вопрос 1
rqdkmndh
@rqdkmndh
Web-разработчик
Советую использовать библиотеку для анимации React Transition Group. Посмотрите видеоплейлист, там все понятно рассказано
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы