Question

我正在做一些实验，现在有了这段代码，每当单击按钮时，我就有一个动态添加到我的3个容器中的类。

该类已成功添加到所有div，但是只有一个div具有动画效果！

const hamburgers = [...document.getElementsByClassName('hamburger')];
const btn = document.getElementById('btn');


btn.addEventListener('click', () => {
    hamburgers.forEach(hamburger => {
        if(!hamburger.classList.contains('move'))  hamburger.classList.add('move') ;
        else hamburger.classList.remove('move')
    })
})

.hamburger {
    position: relative;
}

.bar {
    background: orange;
    position: absolute;
    width: 50px;
    height:5px;
    margin-top: 20px;
}

.bar:nth-of-type(1) {
    top:50px;
}

.bar:nth-of-type(2) {
    top: 100px;
}

 .bar:nth-of-type(3) {
    top: 150px;
} 

#hamburger-1 {
    left: 500px;
    background: #eee;
}

#hamburger-3 {
    left: 700px;
} 

.move {
    left: -150%;
    transition: left 0.4s ease-in-out;
}

<div class="hamburger" id="hamburger-1">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
  </div>

  <div class="hamburger" id="hamburger-2">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
  </div>

  <div  class="hamburger" id="hamburger-3">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
  </div>
  <button id="btn">click</button>

为什么 left:-150% 仅在一个div上起作用，而在单击按钮时不起作用？

动画仅一个div而非全部

0 个答案: