Question

我正在尝试从CSS动画旋转的元素中获取“顶部”和“右侧”值，为此，我正在使用以下代码：

HTML：

<div id="ball1"> </div>

CSS：

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

#ball1 {
    transform-origin: center right;
    animation: spin 2.5s linear 0s infinite forwards;

    position: relative;
    background-color: #7883f7;
    width: 10;
    height: 10;
    border-radius: 10px;
}

Javascript：

console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);

console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);

但是它返回0px的值，我想从Right和Top中获取值，就像我手动设置它们一样（而不是通过变换动画）。

如果这不可能，是否有一种方法可以模拟“圆”旋转并在不使用变换的情况下返回右/顶值？

即： https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0

Answer 1

使用getBoundingClientRect()：

const ball = document.getElementById("ball");
setInterval(() => {
  const rect = ball.getBoundingClientRect();
  console.log(rect.top, rect.right);
}, 300);

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}

#ball {
  transform-origin: center right;
  animation: spin 2.5s linear 0s infinite forwards;
  
  position: relative;
  background-color: #7883f7;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

<div id="ball"></div>

Answer 2

这里是使用top / left的近似值。技巧是为每个属性设置动画，分别交替使用easy函数来模拟圆形路径：

.box {
    width:100px;
    height:100px;
    position:relative;
} 
#ball1 {
  animation: 
    Atop 2.5s infinite,
    Aleft 2.5s infinite;
  position: absolute;
  background-color: #7883f7;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

@keyframes Atop {
  0%,50%,100% {
    top:50%;
    animation-timing-function: ease-out;
  }
  25% {
    top:0%;
    animation-timing-function: ease-in;
  }
  75% {
    top:100%;
    animation-timing-function: ease-in;
  }
  
}
@keyframes Aleft {
  0%,100% {
    left:0;
    animation-timing-function: ease-in;
  }
  25%,75% {
    left:50%;
    animation-timing-function: ease-out;
  }
  50% {
    left:100%;
    animation-timing-function: ease-in;
  }
}

<div class="box">
<div id="ball1"> </div>
</div>

从css动画元素获取顶部/右侧值

2 个答案: