Блог

Главная - Вопросы по программированию - преобразование CSSTransition в группу переходов, условное с нулевым значением

преобразование CSSTransition в группу переходов, условное с нулевым значением

#reactjs #css-transitions #react-transition-group

#reactjs #css-переходы #группа переходов с реакцией

Вопрос:

Пытаюсь заставить работать простой переход с плавным переходом.

Я пытался переместить <CSSTransition> в разные области, но безрезультатно. Я успешно использую это в другом компоненте, который отображает дочерние компоненты, но не могу понять, почему это не сработало бы в этом случае, поскольку я рендерю его вместе с дочерним компонентом, если дочерний компонент вообще будет возвращен.

Дочерний компонент

 const Error = (props) => {
  return (
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  )
}

Родительский компонент

 import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';

import type { InfoState } from './state';
import { closeError } from './actions';

const mapStateToProps = (state: {info: InfoState}) => ({
  info: state.info.data.info,
  infoError: state.info.infoError,
});

const mapDispatchToProps = dispatch => ({
  closeError: () => dispatch(closeError()),
});

class Parent extends Component<Props, State> {
  state = { info: this.props.info };

  handleChange = (e) => {
    this.setState({ info: e.target.value });
    this.props.closeError();
  }

  render() {
    if (this.props.info === null) {
      return (
        <div className="info-wrapper">
          <input
            type="text"
            value={this.state.info ? this.state.info : '' }
            onChange={this.handleChange}
          />
        </div>
        <div className="info-error">
          { this.props.infoError !== ''
            ? <Error 
                key={this.state.info} 
                errorString={this.props.infoError} 
              />
            : null
           }
        </div>
      )
    }
    return ( <div> things </div> )
  }
}

CSS

 .errorTransition-enter {
  opacity: 0.01;
}
.errorTransition-enter-active {
  opacity: 1;
  transition: all 400ms ease-out;
}
.errorTransition-exit {
  opacity: 1;
}
.errorTransition-exit-active {
  opacity: 0.01;
  transition: all 400ms ease-out;
}

Комментарии:

1. Можете ли вы предоставить общий доступ ко всему внутри компонентов? Спасибо.

2. Вы уверены, что это условие: this.props.infoError !== ' ' возвращает true?

3. @ladyk да! Я каждый раз правильно улавливаю ошибку

4. итак, я думаю, что дело в том, что вы не передаете параметр ‘in’ в CSSTransition, пожалуйста, посмотрите на пример: reactcommunity.org/react-transition-group/css-transition /…

5. @ladyk Я тоже пробовал это, так что у меня было in={ props.errorString !== '' } , но перехода все еще не было

Ответ №1:

У меня возникла аналогичная проблема с условным удалением элемента, обернутого <CSSTransition> . Чтобы решить проблему, я обернул <CSSTransition> элемент <TransitionGroup> element и использовал его дочерний элемент prop. childFactory Prop может использоваться следующим образом:

   <TransitionGroup
     childFactory={child => React.cloneElement(child)}
  >
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  </TransitionGroup>