Попытка заставить работать простой плавный переход.
Я пытался перемещать <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 };
handleChangeEvent = (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.handleChangeEvent}
/>
</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;
}
Вы уверены, что это условие: this.props.infoError !== ' ' возвращает true?
@ladyk ага! Я ловлю ошибку каждый раз правильно
поэтому я думаю, что дело в том, что вы не передаете параметр 'в' в CSSTransition, посмотрите на пример: reactcommunity.org/react-transition-group/css-transition/…
@ladyk Я тоже так пробовал, так что у меня было in = { props.errorString !== '' }, но перехода все еще нет
Хм, можно ли предоставить рабочий пример codepen с этой частью вашего кода?





У меня была аналогичная проблема с условным удалением элемента, обернутого <CSSTransition>. Чтобы решить проблему, я обернул элемент <CSSTransition> элементом <TransitionGroup> и использовал его свойство ребенокФабрика. childFactory prop можно использовать так:
<TransitionGroup
childFactory = {child => React.cloneElement(child)}
>
<CSSTransition timeout = {400} classNames = {errorTransition}>
<span> {props.errorString} </span>
</CSSTransition>
</TransitionGroup>
Можете ли вы поделиться всем внутри компонентов? Спасибо.