主页 / 问题 / 1433171
Accepted
Fox
Asked:2022-07-26 17:58:29 +0000 UTC2022-07-26 17:58:29 +0000 UTC

js，更改 div 块的样式属性

  • 772

再会。

有几个元素有自己的风格，看起来像这样。

<div style="position: absolute; transition: all 1s linear 0s; transform: rotate(157.5deg) translate(15em) rotate(-158deg);"> ... </div>

<div style="position: absolute; transition: all 1s linear 0s; transform: rotate(134.5deg) translate(15em) rotate(-134deg);"> ... </div>

所有 div 元素都有不同的变换属性（一般来说，所有 div 元素形成一个圆圈，有两个以上）。

任务如下，需要将初始transform的rotate属性设置为0，然后通过JS“达到”想要的值，这样元素就不会立即出现在它们的位置，而是离开某个位置。你怎么能改变JS中的旋转？也许在每个块中添加一个 ID。

一个重要的补充，我可以通过改变样式document.getElementById('ID').style.transform = 'rotate(337.5deg) translate(15em) rotate(-337deg)' 但是在这种情况下，动画不会发生。

javascript css

1 个回答

  1. Best Answer

    任务如下，需要将初始transform的rotate属性设置为0，然后通过JS“达到”想要的值

    为什么不使用类？前提是您提前知道所有值。例如像这样

    let arr = ['a', 'aa', 'aaa']
btn.addEventListener('click', function() {
  document.querySelectorAll('.b').forEach((el, i) => {
    el.classList.add(arr[i]);
  })
})
    .b {
  position: absolute;
  transition: all 1s linear 1s;
  left: 500px;
  border: 2px solid red;
  transform: rotate(0deg) translate(0em) rotate(0deg);
}

.a {
  transform: rotate(157.5deg) translate(15em) rotate(-158deg);
  transition: all 1s linear 1s;
}

.aa {
  transform: rotate(134.5deg) translate(15em) rotate(-134deg);
  transition: all 1s linear 1.5s;
}

.aaa {
  transform: rotate(111.5deg) translate(15em) rotate(-110deg);
  transition: all 1s linear 2s;
}
    <div class="b" style=""> 1111111111111</div>
<div class="b" style="">1111111111111</div>
<div class="b" style=""> 1111111111111</div>

<button id="btn">Вжух</button>

    • 1

相关问题