为什么 opacity 过渡不起作用，并且 Jobs 组件突然出现没有 opacity 过渡？答案

【问题标题】：why does the opacity transition not work and the Jobs component suddenly appears without opacity transition?为什么 opacity 过渡不起作用，并且 Jobs 组件突然出现没有 opacity 过渡？
【发布时间】：2021-12-25 15:44:36
【问题描述】：

我做了一个从按钮调用的切换功能，但我不明白为什么接收样式的 Jobs 组件突然出现而没有转换。我想要那个不透明度。我希望不透明度增加，直到组件显示缓慢。

import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
import './Experience.css';
class Experience extends Component {


    constructor() {
        super()
        this.state = { display: 'none', opacity: 0 }
        this.toggle = this.toggle.bind(this)
      }
      
    
    toggle() {
        console.log("ENTRO EN TOOGLE")
        if (this.state.display === 'none') {
        this.setState({ display: 'block' })
        setTimeout(() =>
            this.setState({ opacity: 1 }), 300
        )
        }
        else {
        this.setState({ opacity: 0 })
        setTimeout(() =>
            this.setState({ display: 'none' }), 900
        )
        }
    }
  
    styles = (e) => {
        console.log(e)
    }

    render() {
    
    const styles = this.state;

    const { t } = this.props;

    return (
    <div>
      <div className="card">
        <div className="card-content">
          <div className="row mt-top">                 
            <div className="col xl4 l4 m6 s12">     
              <button onClick={this.toggle}>DESPLEGAR</button>
            </div>
            <Jobs  style={styles}></Jobs>
          </div>
        </div>
      </div>
    </div>
  );
}
}
export default withTranslation()(Experience);

【问题讨论】：

标签： reactjs react-native animation styles opacity

【解决方案1】：

你正在尝试的就像想要调用一个函数而不调用它当你想要一个元素进行转换时你需要调用转换 CSS 属性像这样的。

.name {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.name:hover {
    opacity: 1;
}

【讨论】：