时间戳

首页 > 解决方案 > 如何使用 React 让 li 元素一个一个地转换不透明度？

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

问题描述

如何让 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 添加一个类名来做到这一点？

标签： javascriptcssnode.jsreactjsanimation

解决方案

恕我直言，有两个简单的选项，还有更多，但由于以下两个仅依赖于 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}>…&lt;/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})}
        >…&lt;/li>)}
    </ul>)
  }
}

这里的想法是：将 Item 的索引存储在组件的状态中以 next 淡入。渲染时，触发转换的 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，您可以根据需要为尽可能多的元素生成定义。

推荐阅读