在反应组件中的页面加载时按顺序使文本元素淡入

Question

您好，在反应组件的页面加载时，我希望文本元素一个接一个地淡入。最好使用 css。

例子：

<h1 className='hi'>Hi</h1> (fades in)
Then
<p className='boo'>boo</p> (fades in)
<p className='woo'>woo</p> (fades in)```

Any help is appreciated!

Answer 1

下面是如何在 CSS 中定义 animation 的示例，然后根据索引呈现一个具有逐渐变长的 animation 启动延迟的列表：

 const FadeList = () => { const listItems = ['Stantz', 'Spangler', 'Venkman', 'Zeddmore']; return ( <ul> {listItems.map((item, idx) => ( <li className="fade-list-item" style={{ animationDelay: `${500 * idx}ms` }}>{item}</li> ))} </ul> ); } ReactDOM.render( <FadeList />, document.getElementById("react") );

 .fade-list-item { opacity: 0; animation-name: fadein; animation-duration: 500ms; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>