javascript - 如何使用 React 让 li 元素一一过渡不透明度？

Question

如何让 li 元素在 React 中一一淡入？请注意，我最初没有显示 li。然后，我计划当鼠标悬停在 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

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

<强>1。转换延迟:

需要设置transition-delay对于每个元素。假设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。过渡事件:

如上所述here至少有一个事件在转换完成时触发。编码有点复杂。

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>)
  }
}

这里的想法是:存储组件状态中下一个要淡入的元素的索引。渲染时，触发转换的 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，您可以根据需要生成任意数量的元素的定义。