Блог

Главная - Вопросы по программированию - Animation.css и : Ошибка

Animation.css и : Ошибка

#css

Вопрос:

Я использую https://animate.style/, и когда я включаю

ссылка href=»https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css» rel=»таблица стилей»>

В следующем коде:

 <!DOCTYPE html>
<html>
  <head style = "background: black">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  </head>
  <body style = "background: black" class = "animate__animated animate__backInDown animate_slower">
    <div style="position:absolute; left: 40%;">
      <h1 id = "" style="color:white">EXAMPLE</h1>
    </div>
    <button id = "about" style="position: absolute; right: 5%; top: 0%;" >About</button>
    <div class="scripts">
      <script type="text/javascript">
        var buttons = document.getElementsByTagName("button");
        for (let i = 0; i < buttons.length; i  ) {
          buttons[i].addEventListener("click", onButtonClick, false);
        };
        function onButtonClick(event) {
                    if(event.target.id === "about"){
                        window.location.href = "about.html";
                    }else{
              return;
            }
          }
      </script>
    </div>
    <div style="position: absolute; bottom: 24%; left: 1%">
      <form id = "">
        <input type="text" placeholder="Your Address" >
      </form>
    </div>
  </body>
</html>

Я получаю совсем другое позиционирование, чем если бы я его не включал.

Похоже, это влияет только на команды «сверху» и «снизу», за исключением случаев, когда они используются с «кнопками».

Кто — нибудь знает, почему это проблема?

Овации,

K

Ответ №1:

При добавлении cdn и использовании этих классов "animate__animated animate__backInDown animate_slower" в теле теряется неотъемлемое свойство <body> тега, которое приводит к потере процентной меры. Помните, что измерения в процентах берутся из родительского компонента.

Решением было бы следующее:

  <html style="width: 100%; height: 100%;">
  <head style="background: black;">
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      rel="stylesheet"
    />
  </head>
  <body
    style="background: black; width: 100%; height: 100%;"
    class="animate__animated animate__backInDown animate_slower"
  >

Я оставлю вам кодовое поле с вашим полным кодом

Метки: