Реанимация анимации на основе класса

Question

Я задал несколько вопросов относительно этого компонента и зависания. Мой следующий и последний вопрос касается анимации при наведении.

У меня есть класс по умолчанию под названием .eye-контейнер &, а затем .eye-контейнер-парить

Что такое лучший способ оживить этот переход на парении. Вот мой компонент Item:

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; 

Это мой проект «получить-знать-реагировать». Надеюсь, кто-то может помочь.

Answer 1

То, что вы пытаетесь достичь можно решить гораздо проще и чище, используя чистый CSS и его :hover псевдо-класса: (хит код сниппета кнопку Run)

.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>

Редактировать: Вы также можете изменить, например братья и сестры элемента с использованием правильных CSS селекторов:

.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

Я хотел бы предложить вам использовать чистый CSS, если у вас нет взаимодействия зависимостей. Под этим я подразумеваю . У вас нет синхронизирующих взаимодействий, которые запускаются до или после анимации. . Вы анимация чисто на основе CSS, не требуется JS.

Вы можете использовать реакцию на добавление/удаление класса hover для элемента, что дает немного больше контроля над анимацией.

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

И я хотел бы предложить вам использовать модуль имен классов, так что вы можете использовать состояние, чтобы изменить класс, как и содержит все CSS в одном компоненте, так что вы не имеете несколько файлов для управления

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

или просто чистый CSS для простоты

.eye { 
    z-index:1; 

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