Как анимировать CSS анимацию, когда дело доходит до просмотра? - PullRequest
Новая
       7

Как анимировать CSS анимацию, когда дело доходит до просмотра?

0 голосов
/ 23 января 2019

Я создал анимацию индикатора выполнения, я поместил ее внизу моего сайта. Но он анимируется так после загрузки сайта и до того, как он появится на экране. Как я могу анимировать индикатор выполнения, когда дело доходит до просмотра?

компонент. 

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

1 Ответ

0 голосов
/ 23 января 2019

  1. установить node-sass -

    $ npm установить node-sass --save

    $ или

    $ пряжа добавить node-sass

  2. загрузите ваши зависимости в 2 отдельных файла и загрузите в public / index.html

  3. переименуйте ваши файлы .css в .scss

  4. И теперь вы можете использовать scss в своем приложении реакции.

вы можете найти официальный документ здесь

scssв реакции

...