Wie man richtig mit CSS in React

Question

animiert

Ich erstelle eine Seite-Projekt-Website für mich selbst mit React, um ein besseres Verständnis davon zu bekommen. Ich versuche ein Div zu animieren, das eingeblendet wird, wenn der Benutzer zu seiner Position scrollt. Ich habe das On-Scroll-Ereignis erfolgreich ausgeführt, um eine Funktion auszulösen, die den Klassennamen des Divs ändert (nach meinem Verständnis sollte dies den Übergang in der Opazität auslösen). Dies funktioniert jedoch nicht. stattdessen führt dies zu einer Anzeige von nur dem Text innerhalb der div, ohne Animation was auch immer. Ich bin sicher, dass ich etwas falsch mit der Art und Weise tun, ich bin Einstellung des Klassennamen des div aber nicht sicher, was, hier ist der Code:

class Home extends React.Component{ 
    constructor(){ 
    super() 
    this.state = { 
     name: "WhatIdo", 
     firstTransitionPosition: 0 
    } 
    this.handleScroll = this.checkForScroll.bind(this) 
    this.hasBeenSet = false 
    } 

    checkForScroll() { 
    if (window.scrollY >= this.state.firstTransitionPosition && this.hasBeenSet == false) { 
     console.log("this event is triggering") 
     this.setState({name: "WhatIdo--visible"}) 
     this.hasBeenSet = true 
    } 
    } 

    componentDidMount(){ 
    var transitionComp = this.refs.moveMe 
    var topOfElement = transitionComp.getBoundingClientRect().top 
    var heightOfElement = transitionComp.getBoundingClientRect().height 
    this.setState({firstTransitionPosition: topOfElement - heightOfElement}) 
    window.addEventListener('scroll', this.handleScroll); 
    } 

    componentWillUnmount(){ 
     window.removeEventListener('scroll', this.handleScroll); 
    } 


    render(){ 
    return(
     <div> 
     <h1 className="PageTitle">Portfolio</h1> 
     <div className="AboutMe"> 
      some stuff here 
     </div> 
     <div ref="moveMe" className={this.state.name}> 
      some more random stuff 
     </div> 
     </div> 
    ) 
    } 
} 

Und die CSS:

.AboutMe { 
    border-style: solid; 
    border-color: black; 
    border-width: thick; 
    width: 600px; 
    height: 300px; 
    position: relative; 
    left: 365px; 
    bottom: 300px; 
    -moz-animation: fadein 2s; 
} 

@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 2; } 
} 

.WhatIdo { 
    border-style: solid; 
    border-color: black; 
    border-width: thick; 
    width: 600px; 
    height: 300px; 
    position: relative; 
    left: 365px; 
    bottom: 100px; 
    opacity: 0; 
    transition: opacity 2s; 
} 

.WhatIdo--visible { 
    opacity: 1 
} 

Vielen Dank im Voraus für die Hilfe! Sie verlieren alle Stile der WhatIdo Klasse

Answer 1

Es sei denn, ich bin etwas fehlt ... wenn Sie this.state.nameWhatIdo-WhatIdo--visible ändern, einschließlich der transition Eigenschaft, die es in nur Pop verursacht.

Suchen Sie nach einer Möglichkeit, anzugeben, dass das Element sichtbar sein soll zusätzlich zu unter Beibehaltung seiner normalen Stile. Sie könnten beispielsweise einfach die Klasse visible zum Element hinzufügen und die CSS-Definition .WhatIdo.visible haben, sodass sie die anderen überschreibt.

Eine Möglichkeit (aus vielen) wäre die Verwendung einer Vorlagenzeichenfolge und die Änderung des Status, um einfach festzulegen, ob die Elementsichtbarkeit wahr oder falsch ist. Dadurch wird die Reaktion auf Statusänderungen etwas abstrakter und flexibler:

<div ref="moveMe" className={`WhatIdo ${this.state.isVisible ? "visible" : ""}`}> 
     some more random stuff 
    </div>