Учебник по успешной анимации без CSS - PullRequest
Новая
       53

Учебник по успешной анимации без CSS

0 голосов
/ 31 октября 2019

У меня учебник по созданию флажка успеха с анимацией. Я уже создал все элементы, такие как поле для предупреждения и т. Д., Но у меня проблемы с анимацией.

Вот пример кода, которому я следую: Ссылка

Я попытался сделать это на своем компьютере, поместив часть HTML и JS вместе с CSS в таблицу style.css, но не работает: (

Вот документ HTML: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Test</title>

        <script>
            $("button").click(function () {
                $(".check-icon").hide();
                setTimeout(function () {
                $(".check-icon").show();
                }, 10);
                });
        </script>
    </head>
    <body>
        <div class="success-checkmark">
            <div class="check-icon">
                <span class="icon-line line-tip"></span>
                <span class="icon-line line-long"></span>
                <div class="icon-circle"></div>
                <div class="icon-fix"></div>
                </div>
            </div>
            <center>
                <button id="restart">Restart Animation</button>
            </center>
    </body>
</html>

Я не копировал css, поскольку он такой же, как ссылка и длинный код.

Он дает мне белый экран и много предупреждений о проверке кода:

Code inspection

Как я делаю что-то не так, пожалуйста?

Спасибо за вашу помощь,

Джерри

1 Ответ

1 голос
/ 31 октября 2019

jQuery отсутствует в вашем коде, попробуйте добавить его в раздел <head>.

РЕДАКТИРОВАТЬ: Вы также используете неправильный файл .css. Я думаю, что вы скопировали нескомпилированный SCSS из учебника. Чтобы это исправить, вернитесь к примеру CodePen и в верхнем правом углу раздела CSS откройте контекстное меню и нажмите «Просмотр скомпилированного CSS». Затем скопируйте CSS в style.css

Вот рабочее решение: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script>
            $(() => {$("button").click(function () {
                $(".check-icon").hide();
                setTimeout(function () {
                $(".check-icon").show();
                }, 10);
                });});
        </script>
    </head>
    <body>
        <div class="success-checkmark">
            <div class="check-icon">
                <span class="icon-line line-tip"></span>
                <span class="icon-line line-long"></span>
                <div class="icon-circle"></div>
                <div class="icon-fix"></div>
                </div>
            </div>
            <center>
                <button id="restart">Restart Animation</button>
            </center>
    </body>
</html>
...