javascript - 如何通过 Javascript 动态添加关键帧？

Question

所以，我想通过关键帧使用变量为 Html 元素设置动画，但我无法找到通过 DOM 实现的方法。

代码

<div class="pawn" id="pawn1"></div>

CSS 关键帧代码

@keyframes mov_pawn_up {
    0% {
        bottom: 0%;
    }
    100% {
        bottom: 700%;
    }
}

在这里，我希望能够bottom使用变量更改属性。

谢谢你。

标签： javascriptcsswebdom

Answer 1

您可以使用 CSS 变量来实现。基本思路如下

const board = document.querySelector(".board");
const root = document.documentElement;

const update = (evt, y) => {
  const piece = evt.target;
  piece.classList.remove("active");
  piece.style.bottom = y + "px";
};

board.addEventListener("click", evt => {
  const clicked = evt.target.closest(".piece");
  if (!clicked) return;
  const startY = Number(clicked.dataset.y);
  const endY = startY - 20;
  
  root.style.setProperty('--bottom-0', startY + "px");
  root.style.setProperty('--bottom-100', endY + "px");

  clicked.removeEventListener('animationend', update);
  clicked.addEventListener('animationend', evt => update(evt, endY));
  clicked.dataset.y = endY;
  
  clicked.classList.add("active");
});

:root {
  --bottom-0: 0px;
  --bottom-100: -0px;
}

div {
  position: relative;
}

span.piece {
  position: relative;
}


span.piece.active {
  animation-duration: 1.5s;
  animation-name: mov_pawn;
}

@keyframes mov_pawn {
    0% {
        bottom: var(--bottom-0);
        color: blue;
    }
    100% {
        bottom: var(--bottom-100);
        color: black;
    }
}

<div class="board">
  <span class="piece" data-y="0">X</span>
  <span class="piece" data-y="0">X</span>
  <span class="piece" data-y="0">X</span>
  <span class="piece" data-y="0">X</span>
</div>