在查看時如何為 CSS 動畫設置動畫？

Question

我創建了一個進度條動畫，我把它放在我網站的底部。但它在網站加載之后和查看之前會進行動畫處理。 在查看時如何為進度條設置動畫？

成分。

class Skill extends React.Component{
    render(){
        return (
        <div>
            <div data-aos='fade-right' className="front">
                <div className="skills">
                    <h1>Front-End</h1>
                        <li>
                            <h3>HTML</h3><span className="bar"><span className="html"></span></span>
                        </li>
                        <li>
                            <h3>CSS</h3><span className="bar"><span className="css"></span></span>
                        </li>
                        <li>
                            <h3>JavaScript</h3><span className="bar"><span className="javascript"></span></span>
                        </li>
                        <li>
                            <h3>React</h3><span className="bar"><span className="react"></span></span>
                        </li>
                </div>

            </div>
            <div className="back">
            </div>
        </div>
    );
    };

}

codepen 中提供完整代碼

Answer 1

1. 安裝 node-sass --

   $ npm install node-sass --save

   $ 或

   $ yarn 添加節點sass

2. 在 2 個單獨的文件中下載您的依賴項並加載到 public/index.html

3. 將您的文件 .css 重命名為 .scss

4. 現在完成了，您可以在 React 應用程序中使用 scss。

你可以在這里找到官方文檔

scss 反應