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>元素的Objects数组。：

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

这里的想法是：存储Item的索引，以便在组件状态下逐渐淡入。呈现时，触发过渡的css类仅添加到该元素。过渡完成后，回调将修改状态，然后使用下一个索引重新渲染组件。这样，JavaScript无需知道任何css值，这使得在设计迭代期间更容易调整这些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，则可以根据需要生成尽可能多的元素的定义。

如何使用React使li元素一一转变不透明度？

1 个答案: