Javascript 如何获得<；的淡入动画；李>；使用React还是CSS？

当li标记最初隐藏时，如何使用react或CSS淡入li标记？我有代码，所以ul显示，当鼠标悬停在上面时，li进入。但是，如何让li像在JQuery中一样动画化

import React, { Component } from 'react';

class SideBar extends Component {
    state = {
        activeItem: ''
    };
    mouseOver = () => {
        console.log('in');
        this.setState({activeItem: 'collapsed' });
    };
    mouseOut = () => {
        console.log('out');
        this.setState({activeItem: '' });
    };  

    render() {
        const { activeItem, hovering } = this.state;

        return(
    <header className="main-header">
        <div className="main-header-frame">
            <div className="header-wrapper">
                    <ul>
                        <li>
                            <a onMouseLeave={this.mouseOut} onMouseOver={this.mouseOver} href='/test'>Test1</a>
                            <ul className={activeItem === "collapsed" ? 'display' : 'disappear'}>
                                <li>t1</li>
                                <li>t2</li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
            )
    }
};

export default SideBar;

---

你的CSS代码中缺少了一些东西

.disappear {
    border: 1px solid red;
    display: none;
    transition: all 1.6s ease-in-out;
    -webkit-transition: all 1.6s ease-in-out;
    -moz-transition: all 1.6s ease-in-out;
    -o-transition: all 1.6s ease-in-out;  
    transition-delay: .4s;  
}

您试图使用display:none隐藏/显示，display不是“可设置动画”的属性。相反，您可以使用不透明度。阅读有关可以在此处设置动画的属性的详细信息：

此外，在更改不透明度属性之前，需要在li元素上应用过渡和过渡延迟

更好的办法是：

li {
  transition: all 1.6s ease-in-out; //Add transition on the element regardless of display status
}
.disappear { 
  opacity: 0; // Change opacity to 0 when it hides
}

现在，如果一个元素的不透明度为0，它将从屏幕上消失，但您希望它塌陷，相反，您还需要将高度更改为0，以使该元素实际消失。检查这个

---

设置高度动画不是最佳选项，因为更改高度会导致浏览器重新计算位置，动画将显示为抖动。相反，您需要设置变换和不透明度的动画。阅读有关性能动画的更多信息

您是否尝试使用ReactCSTransanitionGroup？checkout@PraveenRaoChavan.G我现在正在阅读它。但是我如何才能在li元素中淡出呢？

li {
  transition: all 1.6s ease-in-out; //Add transition on the element regardless of display status
}
.disappear { 
  opacity: 0; // Change opacity to 0 when it hides
}