Следующая js + группа реакции-перехода не анимирует

Question

У меня проблемы со следующей js + response-animation-group, я следую документации, чтобы реализовать, но не работает, мне нужно анимировать компонент с непрозрачностью от 0 до 1 в 2.5 se c. вот мой тест:

https://codesandbox.io/s/transition-group-u5htd

вы можете видеть, что "анимация div" появляется мгновенно вместо перехода с непрозрачностью, какие-либо идеи, как решить?

Спасибо за все

Answer 1

Вам нужно appear={true} на вашем теге CSSTransition и добавить css для появления активного. И я думаю, что вместо записи css в <style jsx global> тег, вы должны определить новый css файл и импортировать его

.div-appear {
  opacity: 0.01;
}
.div-appear-active {
  opacity: 1;
  transition: all 10000ms ease-out;
}

, вы можете проверить здесь CodeSandBox , надеюсь, это помогает тебе:)