использовать response-transition-group, поскольку дочерний компонент получает новые реквизиты

Question

У меня есть дочерний компонент, в котором я хотел бы использовать slide-out анимацию, когда на него передаются новые реквизиты, и я пытаюсь использовать response-transition-group / switch-transition, но не совсем понятно, как его использовать

Метод рендеринга дочернего компонента выглядит следующим образом

return (
  
    
      
        {/* {JSON.stringify(this.props.fields, null, 2)}

* /} {fields} );

Answer 1

Есть еще кое-что, что вам нужно сделать:

1. CSSTransition должен иметь опору key. Когда оно изменилось, переход вступит в силу.
2. Вам нужно добавить стили перехода самостоятельно, потому что, React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. _ссылка

Таким образом, дочерний компонент будет выглядеть примерно так:

function Child({ propToAnimate }) {
  return (
    <>
      Child Component
      
        
           {
              node.addEventListener("transitionend", done, false);
            }}
            classNames="fade"
          >
            
              
                state: {propToAnimate}

); }

И стили (например, для анимации слайдов):

.fade-enter .animate {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active .animate {
  opacity: 1;
  transform: translateX(0%);
}
.fade-exit .animate {
  opacity: 1;
  transform: translateX(0%);
}
.fade-exit-active .animate {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active .animate,
.fade-exit-active .animate {
  transition: opacity 500ms, transform 500ms;
}

https://codesandbox.io/s/switchtransition-child-component-dk4jo