Базовая реакция на использование тега CSSTransition.Попытка переключения между состояниями - PullRequest
Новая
       30

Базовая реакция на использование тега CSSTransition.Попытка переключения между состояниями

0 голосов
/ 27 сентября 2019

Я недавно учился реагировать, и мне это нравится.Но у меня возникают проблемы, пытаясь понять, как применять теги ReactCSSTransition для плавного перехода между состояниями.Ниже я создал очень простой пример, который должен скользить между большим и маленьким текстом.В настоящее время пример переключает состояние абсолютно нормально, но плавного перехода с плавным переходом между состояниями не происходит.Может кто-нибудь сказать мне, что мне не хватает?Спасибо

App.js 

import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './App.css';

class App extends Component{
  constructor(props){
    super(props)
    this.state={
      bigText: false
    }
  }

  changeState = () => {
    this.setState({bigText: !this.state.bigText})
  }

  render(){
    if(this.state.bigText == true){
      return(
        <div>
            <button onClick={this.changeState}>Click me</button>
            <ReactCSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout={300}
              transitionLeaveTimeout={300}
            >
              <p style={bigtextStyle}>This is a line of text</p>
            </ReactCSSTransitionGroup>

        </div>
      )
    }
    else{
      return (
        <div>
            <button onClick={this.changeState}>Click me</button>
            <ReactCSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout={300}
              transitionLeaveTimeout={300}
            >
              <p style={smallTextStyle}>This is a line of text</p>
            </ReactCSSTransitionGroup>
        </div>
      );
    }

  }

}

const bigtextStyle ={
  fontSize:'50px'
}
const smallTextStyle ={
  fontSize:'20px'
}

export default App;

index.HTML.Стиль для перехода находится в теге файла index.HTML.

    <style>
      .fade-enter{
        opacity:0;
      }
      .fade-enter-active{
        opacity:1;
        transition: opacity 300ms ease-out
      }
      .fade-leave{
        opacity:1;
      }
      .fade-leave-active{
        opacity:0;
        transition: opacity 300ms ease-out
      }
    </style>
...