javascript - 如何为每个类分配不同的 css 翻译值？

Question

.buttons > * {
  transition: transform 700ms;
} 
.buttons > .one.closed {
  transform: translateY(-10vh);
}
.buttons > .two.closed {
  transform: translateY(-20vh);
}
.buttons > .three.closed {
  transform: translateY(-30vh);
}

我有这段代码，单击时我将 .close 类添加到三个元素，有没有办法在不编写 css 规则 n 次的情况下达到相同的效果？我可以通过js来做

例如，这不起作用：

  const menuElements = document.querySelectorAll(".buttons > :not(.main)");
  menuElements.forEach((el, key) => {
    el.setAttribute("transform", -10 * key + "vh");
    el.classList.toggle("closed");
  });

JSFiddle：https ://jsfiddle.net/1cofL06p/

标签： javascriptcsscss-transitions

Answer 1

您忘记将 translateY 插入 setAttribute。无论如何，我认为这应该有效：

function fn() {
  const menuElements = document.querySelectorAll(".buttons > div:not(.main)");
  menuElements.forEach((el, key) => {
    el.style.transform = `translateY(${-20 * key}vh)`;
    el.classList.toggle("closed");
  });
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 69vh;
}


.buttons > * {
  transition: transform 700ms;
}

   <div onclick="fn()" class="buttons">
      <div class="main" style="content: url('https://i.stack.imgur.com/440u9.png');"></div>
      <div class="stats" style="content: url('https://i.stack.imgur.com/440u9.png');"></div>
      <div
        class="settings"
        style="content: url('https://i.stack.imgur.com/440u9.png');"
      ></div>
      <div class="close" style="content: url('https://i.stack.imgur.com/440u9.png');"></div>
    </div>