如何使用React让li元素一个接一个地转换不透明度

Question

如何让li元素在React中一个接一个地淡入？注意，我最初将li显示为none。然后，我计划在鼠标悬停在ul单词上时激活它们。初始li的不透明度为0，但我希望li逐个更改为不透明度1。我该怎么做？

import React, { Component } from 'react';
import { Image } from 'semantic-ui-react'
class SideBar extends Component {
state = {
activeItem: '',
displaying: false
};
mouseOver = () => {
this.setState({displaying: true,activeItem: 'collapsed' });
};
mouseOut = () => {
this.setState({displaying: false ,activeItem: '' });
};  
render() {
const { activeItem, displaying } = this.state;
let x = {
a: {display: 'none'},
b: {display: 'block'}
}
return(
<header className="main-header">
<div className="main-header-frame">
<div className="header-wrapper">
<nav 
onMouseLeave={this.mouseOut}
onMouseOver={this.mouseOver}               
className="main-navigation-container">
<ul className="main-navigation">
<li>
<a 
href='/test'>Test1</a>
<ul
className="t1"
style={Object.assign({},displaying && x.b, !displaying && x.a)
>
<li>t1</li>
<li>t2</li>
<li>t3</li>
<li>t4</li>
<li>t5</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
)
}
};
export default SideBar;

我的CSS如下：

.t1 > li {  
opacity: .2;
transition: all .8s ease-out;
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
-o-transition: all .8s ease-out;  
transition-delay: .4s;      
}
.t1 > li:hover {    
opacity: 1;
}

也许有一种方法可以做到，给每个li添加一个类名？

Answer 1

IMHO有两个简单的选项，还有更多，但由于以下两个选项仅依赖于css转换，没有关键帧或js动画，我认为它们是解决该问题的简单方法。

1.转换延迟：

需要为每个元素设置CCD_ 1。假设items是应转换为<li>元素的对象数组

const TRANSITION_DURATION = 3; //in seconds, one needs to »know« this
//could be parsed from the css
items.map((item, idx) => 
<li 
key="…"
className="fade-in-class" 
style={transitionDelay: idx * TRANSITION_DURATION}>…</li>
);

因此，我们的想法是：增加每个过渡的延迟，使过渡一个接一个地出现。缺点是，Javascript需要了解某些css值，在这种情况下是转换持续时间。

2.转换事件：

正如这里所描述的，至少有一个事件，当转换完成时触发。这对代码来说有点复杂。

class FadeList extends React.Component {
constructor(props) {
super(props);
this.state = {
itemToFade: 0
}
}
render () {
const toFade = this.state.itemToFade;
return (<ul>
{this.props.items.map((item, idx) => 
<li
key="…"
className={idx == toFade ? 'fade-class' : ''  }
onTransitionEnd={e => this.setState({itemToFade: toFade + 1})}
>…</li>)}
</ul>)
}
}

这里的想法是：存储Item的索引，以便在组件的状态下淡入。渲染时，触发转换的css类仅添加到该元素中。转换完成后，回调将修改状态，然后使用下一个索引重新呈现组件。这样一来，Javascript就不需要知道任何css值，这使得在设计迭代过程中更容易调整这些值。请注意，上面的代码只是为了说明这个想法，我还没有测试。

根据需求，但如果可能的话，最简单的解决方案可能是纯css解决方案。

.transition {
/* all the needed stuff here */
transition-duration: 2s;
}
.transition:nth-child(2) {
transition-delay: 2s;
}
.transition:nth-child(3) {
transition-delay: 4s;
}
/* And so forth */

如果您使用的是sass，那么您可以根据需要为任意多的元素生成定义。