使用 Javascript vanilla 动画元素答案

【问题标题】：Animate element using Javascript vanilla使用 Javascript vanilla 动画元素
【发布时间】：2019-10-07 19:16:46
【问题描述】：

如何使用 Javascript vanilla 为元素制作动画？与 jquery 类似。示例：

$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);

我们在哪里传递属性、期望的值和时间。

在我的情况下，我需要左侧和顶部位置来设置动画和滑动。

解决方案

我已经按照@IceMetalPunk 的建议完成了，只有在我需要动画时才通过 css 添加动画。

document.getElementById("animate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.classList.add("animate");
  setTimeout(()=> e.classList.remove("animate"), 500);

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

document.getElementById("dontAnimate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

#elementToAnimate {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

#elementToAnimate.animate {
  transition: left 500ms ease-in-out, top 500ms ease-in-out;
}

<div id="elementToAnimate"></div>

<button id="animate">Animate</button>
<button id="dontAnimate">Dont Animate</button>

【问题讨论】：

为什么不用 CSS 呢？
stackoverflow.com/questions/8609037/…
@SebastianSimon 我不想每次都制作动画，如果我在元素中插入transition，它会在每次更改其left和top位置时制作动画

标签： javascript animation

【解决方案1】：

尝试使用 CSS 过渡。在 CSS 中，执行如下操作：

button.continue {
  transition: 5s;
}

然后在 JS 中，你可以只设置 left/top 值：

document.querySelectorAll('button.continue').forEach(button => {
  button.style.left = '100px';
  button.style.top = '200px';
});

【讨论】：

我不想每次都制作动画，如果我在元素中插入transition，它会在每次更改其left和top位置时制作动画
在这种情况下，我建议您在想要为其设置动画时打开和关闭“动画”类。该类只有transition 属性，所以当它打开时，属性会动画，当它关闭时，它们不会。

【解决方案2】：

在 Firefox 中测试。

document
   .querySelector(".text.thank-you")
   .animate({ opacity: [0, 1] }, { duration: 5000, iterations: 1, easing: "ease-out" })
   .onfinish = (e) => {
        e.target.effect.target.style.opacity = 1;
   };

【讨论】：

【解决方案3】：

看看Web Animation API。它是一个实验性功能，因此Browser Support（主要是 Safari）可能对您来说是个问题。否则，您可以按照其他人已经指出的方式进行操作。

【讨论】：

【解决方案4】：

尝试使用 WebComponents，您可以仅使用 VanillaJS 执行任何类型的动画，有预定义的动画，例如 Animate.css 但您可以使用 keyFrames 创建自定义动画：

<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script>

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="1200"
  delay="300"
  animation="heartBeat"
  iterations="Infinity"
  style="display: flex;align-self: center;"
>
  <h1>Hello World</h1>
</animatable-component>

更多详情请查看：https://github.com/proyecto26/animatable-component

【讨论】：