Question

试图获得简单的淡入/淡出过渡效果。

我尝试将import { Component } from '@angular/core'; import { Router, NavigationStart, NavigationEnd, Event, NavigationCancel, NavigationError } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { loading = true; constructor(private router: Router) { this.router.events.subscribe((routerEvent: Event)=>{ if(routerEvent instanceof NavigationStart) { this.loading = true; } if(routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError){ this.loading = false; } }); } }移动到不同的区域，但无济于事。我已在另一个映射子级的组件中成功使用了此组件，但无法看到为什么在这种情况下不起作用，因为如果子级完全返回，则我将其与子组件一起渲染。

子组件

<CSSTransition>

父组件

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

CSS

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> )
  }
}

Answer 1

我有一个类似的问题，有条件地删除用<CSSTransition>包装的元素。为了解决该问题，我用一个<CSSTransition>元素包装了<TransitionGroup>元素，并使用了它的childFactory属性。 childFactory道具可以像这样使用：

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

react-transition-group CSSTransition，条件为null

1 个答案: