如何使用 React 或 CSS 让 <li> 的动画淡入淡出？

Posted 2023-02-22

【中文标题】如何使用 React 或 CSS 让 <li> 的动画淡入淡出？

【英文标题】：how do I get a fade in animation for <li> using React or CSS?

【发布时间】：2019-04-10 13:15:04

【问题描述】：

如何使用 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;  

【问题讨论】：

你尝试过使用 ReactCSSTransitionGroup 吗？结帐reactjs.org/docs/animation.html

@PraveenRaoChavan.G 我现在正在阅读它。

但是如何让 li 元素淡入淡出？

【参考方案1】：

您的 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 不是“动画”属性。相反，您可以使用不透明度。阅读更多关于您可以在此处设置动画的属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

另外，在更改 opacity 属性之前，需要在 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

现在，如果一个元素的 opacity:0，它将从屏幕上消失，但您希望它折叠，相反您还需要将高度更改为 0 以使该元素真正消失。检查这个codepen

动画高度不是最好的选择，因为改变高度会导致浏览器重新计算位置并且动画会出现抖动。相反，您需要为变换和不透明度设置动画。阅读更多关于高性能动画here