У меня есть этот компонент с эффектом перехода

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

class TransitionComp extends Component{

    state = {
      show: true
    }

    showDiv = () => {
        this.setState({show: !this.state.show ? true : false})
    }

    render(){
        return(
            <div>
                <Transition in={this.state.show} timeout={2000}>
                    {state =>
                        <div style={{
                            background: 'red',
                            height: '100px',
                            transition: 'all 2s ease',
                            opacity: state === 'existed' || state === 'existing' ? 0 : 1
                        }}>{state}</div>

                    }
                </Transition>

                <div className="showDiv" onClick={this.showDiv}>Show or Hide</div>

            </div>



        )
    }
}


export default TransitionComp;

Когда я нажимаю show or hide, я не вижу анимации замедления, просто меняется состояние, так почему?

0
Wel 26 Май 2018 в 05:31

1 ответ

Лучший ответ

Ваш код правильный, есть некоторые ошибки типа вместо existed должно быть exited и existing должно быть exiting.

   <Transition in={this.state.show} timeout={2000}>
      {state =>
        <div style={{
          background: 'red',
          height: '100px',
          transition: 'all 2s ease',
          opacity: state === 'exited' || state === 'exiting' ? 0 : 1
        }}>{state}</div>

      }
    </Transition>

Edit wqxlky3z8w

1
Shrroy 26 Май 2018 в 03:07