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>
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';
});
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.
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
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;
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.