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

Posted 2023-03-06

【中文标题】为啥 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);

【参考方案1】：

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

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


.name:hover 
    opacity: 1;