在查看时如何为 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 add node-sass

2. 将您的依赖项下载到 2 个单独的文件中并加载到 public/index.html

3. 将文件 .css 重命名为 .scss

4. 现在您可以在您的 react 应用中使用 scss。

你可以在这里找到官方文档

scss in react