Reagieren Hover-Animation basierend auf Klasse

Question

Ich habe ein paar Fragen in Bezug auf diese Komponente und Hovering bisher gestellt. Meine nächste und letzte Frage betrifft die Animation beim Hover.

Ich habe die Standardklasse genannt .eye-Container & und dann

.eye-Container-schweben Was ist der beste Weg, um diesen Übergang auf schweben zu animieren. Hier ist meine Artikelkomponente:

import React from 'react'; 
import { Link } from 'react-router'; 

import Eyecon from '../../static/eye.svg'; 


class Item extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Item'; 
     this.state = { 
      hover: false 
     }; 
    } 
    mouseOver(){ 
     this.setState({hover: true}); 
    } 
    mouseOut() { 
     this.setState({hover: false}); 
    } 
    render() { 
     const { item, i } = this.props; 
     return (
      <div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}> 
       <Link to={`/view/${item.id}`}> 
        <div className="eye-container"> 
         <img src={Eyecon}/> 
        </div> 
        <div className="grid-image"> 
         <img src={item.image} alt="" className="fade-in img"></img> 
        </div> 
        <div className="columns"> 
         <div className="column"> 
          <h2>{item.title}</h2> 
         </div> 
         <div className="column"> 
          <h3>Type:</h3> 
          <p>{item.type}</p> 
         </div> 
        </div> 
       </Link> 
      </div> 
     ) 
    } 
} 


export default Item; 

Dies ist mein "get-to-know-react" Projekt. Hoffe jemand kann helfen.

Answer 1

Was Sie versuchen können zu erreichen gelöst werden viel einfacher und sauberer mit reinem CSS und seine :hover Pseudoklasse: (drücken Sie die Run Code-Schnipsel Taste)

.blackbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    z-index: 1; 
 
    position: absolute; 
 
} 
 

 
.blackbox:hover { 
 
    z-index: 3; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.redbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
}

<div class='container'> 
 
    <div class='blackbox'></div> 
 
    <div class='redbox'></div> 
 
<div>

Edit: Sie können auch zB ändern Die Geschwister des Elements die richtigen CSS-Selektoren mit:

.blackbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    z-index: 1; 
 
    position: absolute; 
 
} 
 

 
.blackbox:hover + div { 
 
    z-index: 0; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.redbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
}

<div class='container'> 
 
    <div class='blackbox'></div> 
 
    <div class='redbox'></div> 
 
<div>

Answer 2

Ich würde vorschlagen, Sie reine CSS verwenden, wenn Sie keine Abhängigkeit Wechselwirkungen haben. Damit meine ich - Sie haben keine Synchronisierungsinteraktionen, die vor oder nach der Animation auslösen - Sie Animation ist rein CSS basiert, keine JS erforderlich.

Sie können reagieren, um Hover-Klasse zum Element hinzufügen/entfernen, die ein wenig mehr Kontrolle über die Animation gibt.

.eye {} 
.eyeContainer.lookAround .eye{ ..animate.. } 
.eyeContainer.blink .eyelid {} // you can do a timer to change its state 

und ich würde vorschlagen, dass Sie den Klassennamen Modul verwenden, so dass Sie Zustand können Sie die Klasse wie ändern, und enthält alle CSS in der gleichen Komponente, so dass Sie nicht mehrere Dateien zu verwalten

<eye className={classnames({ 
     blink: this.state.blink, 
     rotate : this.state.rotate 
})} /> 

oder nur reine CSS für Einfachheit

.eye { 
    z-index:1; 

} 
.eye:hover + .eyelid.blink{ 
    z-index:10 
    height: 0 
    animate: height 2s 
}