Javascript 基于类的反应悬停动画

到目前为止，我已经问了一些关于这个组件和悬停的问题。我的下一个也是最后一个问题是关于悬停动画

我有一个名为.eye-container的默认类，然后是.eye-container-hover

悬停时设置此过渡动画的最佳方法是什么。以下是我的项目组件：

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;

从“React”导入React；
从“反应路由器”导入{Link}；
从“../static/eye.svg”导入Eyecon；
类项扩展了React.Component{
建造师（道具）{
超级（道具）；
this.displayName='Item'；
此.state={
悬停：错误
};
}
mouseOver（）{
this.setState（{hover:true}）；
}
mouseOut（）{
this.setState（{hover:false}）；
}
render（）{
const{item，i}=this.props；
返回(
{item.title}
类型：
{item.type}

)
}
}
导出默认项；

---

这是我的“了解反应”项目。希望有人能提供帮助。

使用纯CSS及其

：hover

伪类（点击运行代码片段按钮）可以更简单、更清晰地解决您试图实现的问题

.blackbox{
宽度：100px；
高度：100px；
背景：黑色；
z指数：1；
位置：绝对位置；
}
.黑匣子：悬停{
z指数：3；
高度：120px；
宽度：120px；
}
雷德博克斯先生{
宽度：100px；
高度：100px；
背景：红色；
z指数：2；
位置：绝对位置；
左：70像素；
顶部：70像素；
}

---

如果没有依赖交互，我建议您使用纯CSS。我的意思是说 -您没有在动画之前或之后触发的任何同步交互 -您的动画完全基于CSS，不需要JS

您可以使用react向元素添加/删除悬停类，这样可以更好地控制动画

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

我建议您使用classnames模块，这样您就可以使用state来更改类，比如在同一个组件中包含所有css，这样您就不会有多个文件需要管理

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

---

您希望通过悬停效果实现什么？标准CSS

：hover

伪类是否足够？@TimoSta我想更改位置、z索引和高度。这完全可以通过CSS的。这允许您显著地分离JavaScript代码。@TimoSta，但我正在尝试影响.eye容器类，但这不起作用，因为…？您如何将鼠标悬停在黑框上并设置红框动画？它在代码段中起作用，但对我不起作用。这是我用过的。网格框：hover+.eye容器{高度：500px；位置：relative；}eye容器不是网格框的子级。这是因为

+

选择器引用元素的直接同级。您试图连接的两个元素没有兄弟元素。@TimoSta我可以控制动画的持续时间吗？使用css可以缓慢地生成动画吗？

.eye {
    z-index:1;

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