我如何獲得淡入淡出的動畫<li>使用 React 還是 CSS？

Question

當 li 標簽最初被隱藏時，如何使用 React 或 CSS 淡入它們？ 我有代碼，所以顯示 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;  
}

Answer 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 隱藏/顯示，顯示不是“可動畫”屬性。 相反，您可以使用不透明度。 在此處閱讀有關可以設置動畫的屬性的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

此外，在更改 opacity 屬性之前，需要在 li 元素上應用 transition 和 transition-delay。

更好的方法是：

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 以使元素真正消失。 檢查這個代碼筆

動畫高度不是最好的選擇，因為改變高度會導致瀏覽器重新計算位置，動畫會出現抖動。 相反，您需要為變換和不透明度設置動畫。 在此處閱讀有關高性能動畫的更多信息