Estoy tratando de mover este cuadrado a la derecha 100 px después de hacer clic en él con js, configuré la transición a 1s, pero no funciona
window.onload = function(){ var square = document.querySelector(".square"); square.onclick = function(){ square.style.right = "100px"; }; }; .square { position: absolute; background-color: red; width: 500px; height: 500px; transition: 1s; } <div class="square"> </div>CSS no animará cosas de auto a px .
Dado que right no está definido, el valor predeterminado es auto .
window.onload = function(){ var square = document.querySelector(".square"); square.onclick = function(){ square.style.right = "100px"; }; }; .square { position: absolute; background-color: red; width: 500px; height: 500px; right: 0; transition: 1s; } <div class="square"> </div> Sin embargo, si desea animarlo sin configurarlo right el principio, también puede usar translate .
window.onload = function(){ var square = document.querySelector(".square"); square.onclick = function(){ square.style.transform = "translateX(100px)"; }; }; .square { position: absolute; background-color: red; width: 500px; height: 500px; transition: 1s; } <div class="square"> </div>