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

安装node-sass-

$ npm install node-sass --save

$或

$ yarn加节点-sass
将您的依赖项下载到2个单独的文件中，并加载到public / index.html
将文件.css重命名为.scss
现在完成了，您可以在react应用中使用scss。

您可以在此处找到官方文档

scss in react

观看时如何为CSS动画制作动画？

1 个答案: