使用 Javascript vanilla 动画元素

Question

How can I animate an element with Javascript vanilla? Similar with jquery. Example:

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

Where we pass the attribute, the desired value and the time.

In my case I need the left and top position to animate and slide.

Solution

I've done as @IceMetalPunk sugested and added the animation by css only when I need to animate.

 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>

Answer 1

Try using CSS transitions. In CSS, do something like this:

button.continue {
  transition: 5s;
}

Then in JS, you can just set the left/top values:

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

Answer 2

Take a look at the Web Animation API . Its an experimental feature so Browser Support (mainly Safari) might be an issue for you. Otherwise you can do it the way others have already pointed out.

Answer 3

Try using WebComponents , you can perform any kind of animation using only VanillaJS , there are predefined animations like Animate.css but you can create custom animations by using 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>

For more details check here: https://github.com/proyecto26/animatable-component

Answer 4

Note this API may still be subject to change. I tested this in 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;
   };