我正在尝试为页面上从一个 Angular 到另一个 Angular 的对 Angular 线设置动画。无论屏幕格式如何，该线都应该是对 Angular 线。我认为(或者我认为)我必须在 CSS 中使用 transform:rotate() 。使用 jquery 或 Javascript，我尝试返回并计算给定屏幕格式的线条必须旋转的 Angular 。该参数应该传递给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>
该代码在屏幕上绘制一条线，但不旋转。 如何解决这个问题？
最佳答案
你必须把你的<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>关于javascript - 对从一个 Angular 到另一个 Angular 的对 Angular 线进行动画处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61142410/