Как получить li элементы для непрозрачности перехода один за другим, используя React?

Question

Как заставить элементы li постепенно исчезать в React? Обратите внимание, у меня изначально нет li-дисплея. Затем я планирую активировать их, когда мышь наводит курсор на слово ul. У исходного li будет непрозрачность 0, но затем я хочу, чтобы li поочередно сменил значение на opacity 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. События перехода:

Как описано здесь существует как минимум одно событие, которое запускается, когда завершается переход. Это немного сложнее для кода.

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, вы можете сгенерировать определения для стольких элементов, сколько пожелаете.