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

Question

[TheSnegok]

Есть вот такой 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 то нету, подскажите в чём проблема?

Answer 1

[Антон Горецкий]

Советую использовать библиотеку для анимации React Transition Group. Посмотрите видеоплейлист, там все понятно рассказано