ReactJS-Komponente:fadeIn / fadeOut bei Mauseingabe / Mausverlassen
-
21-12-2019 - |
Frage
Ich habe eine einfache Komponente erstellt reactjs
(eine Art Wertauswahl: Plunker)
Jetzt möchte ich, dass der obere und untere Teil des Steuerelements ausgeblendet wird (opacity=0
) und animieren opacity=1
wenn der Benutzer mit der Maus über die Zentrale fährt div
(.range-picker-selection
) mit der Maus.
Da es keine Möglichkeit gibt, damit zu operieren DOM
direkt aus Funktionen meiner Komponente (reactjs
entmutigt dies) Ich schätze, ich sollte den Status ändern (in etwas wie state.expanded = true
) und verlassen Sie sich darauf reactjs
um die Veränderung widerzuspiegeln.
Aber wie kann ich den Animationseffekt erzielen?
Mit jQuery hätte ich verwendet element.animate({opacity:0})
aber jetzt habe ich keinen Zugriff darauf DOM
Lösung
Etwas wie das?
http://plnkr.co/edit/5tLWNTtpsSWBUCgnKwQO?p=preview
Ich habe den Status so aktualisiert, dass er über ein schwebendes Attribut und zwei Eingabe-/Verlassensmethoden mit der Maus verfügt, um den Wert festzulegen, die an das .range-picker-selection-Element in der Renderfunktion gebunden sind
<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>
onMouseEnterHandler: function () {
this.setState({
hovered: true
})
},
onMouseLeaveHandler: function () {
this.setState({
hovered: false
})
},
Ich habe auch die Renderfunktion aktualisiert, um die Deckkraft für die Elemente entsprechend auf 0 oder 1 zu setzen.
style={{opacity: this.state.hovered ? 1 : 0}}
Schließlich erfolgt die eigentliche Animation mit CSS-Animationen
transition: opacity 1s;
ich hoffe das hilft