Estoy tratando de hacer que un cuadro se deslice de izquierda a derecha usando solo una transición como esta:
#box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ background-color: green !important; right:0 !important; } <div id="box" onclick="this.classList.add('active')"></div>pero por alguna razón la caja no se desliza hacia la derecha
Esta solución funciona pero no hay explicación.
¿Alguien puede explicar por qué el color de fondo cambia pero no en la posición correcta?
debe especificar la propiedad 'derecha' para el cuadro en px o en %, en lugar de 'auto'.
#box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:calc(100% - 150px); /* right is positioned to left by reducing the actual box width */ } .active{ background-color: green !important; right:0 !important; } <div id="box" onclick="this.classList.add('active')"></div>Uso right: auto; No funciona.
#box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:100%; transform: translate(100%,0); } .active{ background-color: green !important; right:0 !important; transform: translate(0,0) !important; } <div id="box" onclick="this.classList.add('active')"></div>Intente usar animation en su lugar y agregue fotogramas clave como en el fragmento a continuación.
#box { width: 150px; height: 150px; background: red; position:absolute; animation: slide 2s forwards ease-out; right:auto; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } } <div id="box"></div>