Как добавить эффект плавного перехода к содержимому условного рендеринга в React? - PullRequest
Новая
       16

Как добавить эффект плавного перехода к содержимому условного рендеринга в React?

0 голосов
/ 18 июня 2019

Я хочу, чтобы div карты-оболочки отображал что-то, когда мышь не наведена, и что-то еще, когда мышь наведена, вот так. Однако переход css: 0.8s не работает ни для карт-обертки, ни для ее содержимого. Могу ли я узнать, как сделать так, чтобы содержимое (процентная доля карты, сумма карты, кнопка p) постепенно исчезало при onMouseEnter и onMouseLeave? Большое вам спасибо! 

import React, { Component } from 'react';



class CardOverview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hover: false
        }
    }


    render() {

        return (


            <div className="card-container" key={this.props.card.id} onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })} >

                {!this.state.hover &&
                    <div className="card-wrapper" >
                        <div className="card-percentage">
                            <div className="p1">50%</div>
                            <div className="p2">Percentage</div>
                       </div>

                        <div className="card-amount">
                            <div className="p1">30000</div>
                            <div className="p2">Amount</div>
                        </div>
                    </div>
                }

                {this.state.hover &&
                    <div className="card-wrapper" >
                        <button>View</button>
                    </div>
                }


            </div>

        )
    }
}
export default CardOverview;
...