Question

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

我有一个名为.eye-container＆amp;的默认类。然后.eye-container-hover

在悬停时设置此转换动画的最佳方法是什么？这是我的Item组件：

finalText

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

Answer 1

使用纯CSS及其:hover伪类，可以更简单，更清晰地解决您想要实现的目标:(点击运行代码段按钮）

＆＃13;

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

＆＃13;

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

＆＃13;

修改：您也可以更改，例如元素的兄弟姐妹使用正确的CSS选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您没有依赖关系，我建议您使用纯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

.eye {
    z-index:1;

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

基于类反应悬停动画

2 个答案: