Tengo un elemento con estilo
position: relative;
transition: all 2s ease 0s;
Luego, quiero cambiar su posición sin problemas después de hacer clic en él, pero cuando agrego el cambio de estilo, la transición no tiene lugar, sino que el elemento se mueve instantáneamente.
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
Sin embargo, si cambio la color
propiedad, por ejemplo, cambia sin problemas.
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
¿Cuál podría ser la causa de esto? ¿Hay propiedades que no sean 'transitorias'?
EDITAR : Supongo que debería haber mencionado que esto no es jQuery, es otra biblioteca. El código parece funcionar según lo previsto, se están agregando estilos, pero ¿la transición solo funciona en el segundo caso?
javascript
css
transition
php_nub_qq
fuente
fuente
.on()
método. Si no, ¿qué es $$?top
parece estar en la lista, lo que elimina mis dudas sobretop
no estar disponible para las transiciones.top
valor establecido (a 0, por ejemplo) antes de cambiarlo (a 200 o lo que sea)Respuestas:
Intente establecer un valor predeterminado en el css (para que sepa dónde desea que comience)
CSS
position: relative; transition: all 2s ease 0s; top: 0; /* start out at position 0 */
fuente
transition: top 1s ease 0s;
portop
Tal vez es necesario especificar un valor superior en su conjunto de reglas CSS, de modo que sabrá qué valor para animar a .
fuente
En mi caso, la posición div fue fija, agregar la posición izquierda no fue suficiente, comenzó a funcionar solo después de agregar el bloque de visualización
left:0; display:block;
fuente
Algo que no es relevante para el OP, pero tal vez para otra persona en el futuro:
Para píxeles (
px
), si el valor es "0", la unidad se puede omitir:right: 0
yright: 0px
ambos funcionan.Sin embargo, noté que en Firefox y Chrome este no es el caso de la unidad de segundos (
s
). Si bientransition: right 1s ease 0s
funciona,transition: right 1s ease 0
(unidad faltantes
para el último valortransition-delay
) no (lo hace funciona en Edge).En el siguiente ejemplo, verá que
right
funciona para ambos0px
y0
, perotransition
solo funciona para0s
y no funciona con0
.#box { border: 1px solid black; height: 240px; width: 260px; margin: 50px; position: relative; } .jump { position: absolute; width: 200px; height: 50px; color: white; padding: 5px; } #jump1 { background-color: maroon; top: 0px; right: 0px; transition: right 1s ease 0s; } #jump2 { background-color: green; top: 60px; right: 0; transition: right 1s ease 0s; } #jump3 { background-color: blue; top: 120px; right: 0px; transition: right 1s ease 0; } #jump4 { background-color: gray; top: 180px; right: 0; transition: right 1s ease 0; } #box:hover .jump { right: 50px; }
<div id="box"> <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div> <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div> <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div> <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div> </div>
fuente
Respuesta: si .
Si la propiedad no figura aquí, no es 'transitoria' .
Referencia: Propiedades CSS animables
fuente
Hoy me encontré con este problema. Aquí está mi solución hacky.
Necesitaba un elemento de posición fija para hacer una transición de 100 píxeles a medida que se cargaba.
var delay = (ms) => new Promise(res => setTimeout(res, ms)); async function animateView(startPosition,elm){ for(var i=0; i<101; i++){ elm.style.top = `${(startPosition-i)}px`; await delay(1); } }
fuente