Анимация диагональной линии из угла в угол - PullRequest
Новая
       0

Анимация диагональной линии из угла в угол

0 голосов
/ 10 апреля 2020

Я пытаюсь анимировать диагональную линию поперек страницы из одного угла в другой. Линия должна быть диагональной независимо от формата экрана. Я понял (или я так думаю), что я должен использовать transform: rotate() в CSS. Используя jquery или Javascript, я попытался вернуть и вычислить степень, в которой линия должна поворачиваться для данного формата экрана. Этот аргумент должен быть передан rotate().

Я пробовал следующее с jQuery и Javascript: 

<script>

  $('#move').css('transform', 'rotate(-' + Math.atan2($(window).width(), $(window).height()) + 'rad)').show();

</script>

или 

<script>

  document.querySelector('#move').style.transform = Math.atan2($(window).width(), $(window).height())+'rad';

</script>

И с CSS и HTML: 

<style>
  #move {
  width: 0;
  height: 4px;
  background: red;
  position: relative;
  animation: mymove 3s;
  animation-fill-mode: forwards;
  transform-origin: top left;


}

  @keyframes mymove {
    from {top: 0; transform: rotate(0deg);}
    to {width:100%; background-color: blue;}
    }
</style>




<body>

<div id="move"></div>

</body>

Код dr aws строка на экране, но она не поворачивается. Как это можно исправить?

1 Ответ

1 голос
/ 10 апреля 2020

Вы должны поместить <script> в самый низ <body>, чтобы код работал после загрузки DOM. 

const move = document.querySelector('#move')
const angle = Math.atan2(document.documentElement.clientHeight, document.documentElement.clientWidth);
const width = document.documentElement.clientWidth / Math.cos(angle);

move.style.setProperty('--a', angle + 'rad');
move.style.setProperty('--w', width + 'px');
html, body, #move {margin:0; padding:0}

#move {
  width: 0;
  height: 4px;
  background: red;
  position: relative;
  animation: mymove 3s;
  animation-fill-mode: forwards;
  transform: rotate(var(--a));
  transform-origin: top left;
}

@keyframes mymove {
  to {
    width: var(--w);
    background-color: blue;
  }
}
<div id="move"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...