почему response-addons-css-transition-group здесь не работает?

Question

import CSSTransitionGroup from 'react-addons-css-transition-group' ; 

class VariableDefinitions extends Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <CSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            <VariableDefine id={id} key={id} {...this.props} />
        </CSSTransitionGroup>
      );
    })
}}

Так я использую группу переходов.Вот мои классы в style.css

.fade-enter{
  opacity: 0;
  height: 0%;
}
.fade-enter-active{
  transition: all 1s ; 
  height: 100%;
  opacity: 1;
}

.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all 1s ;
  opacity: 0;
}

Когда я добавляю элементы elements (VariableDefine), изменяя данные idToVarStates, я вообще не получаю никакой анимации.Что здесь не так?как это исправить?

Answer 1

Пакет был удален.

Во-первых, вот введение о response-addons-css-transition-group в пакете npm.

Reaction-addons-css-transition-group Код в этом пакете перемещен.Вместо этого мы рекомендуем использовать CSSTransitionGroup из response-transition-group.

Итак, пакет activ-addons-css-transition-group сейчас не рекомендуется использовать. Рекомендуется использовать response-transition-group.

---

Возможно, страница разбита.

Во-вторых, Object.keys (idToVarStates) .map отобразит слишком много TransitionGroup. И сделает страницу раздавленной.

---

Измените CSSTransition на этот.

<TransitionGroup className="todo-list">
                {idToVarStates.map(({ id, text }) => (
                    <CSSTransition
                        key={id}
                        timeout={500}
                        classNames="fade"
                    >
                        <VariableDefinition text={text} key={id} filter={this.props.filter} {...this.props}/>
                    </CSSTransition>
                ))}
            </TransitionGroup>

---

Рабочий код

Я создаю пример для response-transition-group. Вот результат.

И рабочий код здесь: https://codesandbox.io/s/github/stackOverflow166/variable

Answer 2

Простой ответ.Посылка была перемещена.Согласно странице npm для react-addons-css-transition-group.

Код в этом пакете перемещен.Вместо этого мы рекомендуем использовать CSSTransitionGroup из response-transition-group.

Попробуйте удалить текущий пакет, запустив npm uninstall react-addons-css-transition-group.Затем установите правильный пакет с помощью:

npm i react-transition-group

Измените импорт, где это необходимо, и оберните ваш CSSTransitionGroup с помощью <TransitionGroup>.Попробуй это.

Вы также можете пройти через это (можно найти на странице github группы реагировать на переход) Руководство по миграции , которое поможет вам в этом.

Надеюсь, это поможет.

Answer 3

Я отредактировал ваш код и заменил его на мой код.

import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' ; 

class VariableDefinitions extends React.Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <ReactCSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            {React.cloneElement(this.props.children, {key: page})}
        <ReactCSSTransitionGroup>
      );
    })
}}

Вот style.css

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}