A transição CSS não funciona com superior, inferior, esquerda, direita


91

Eu tenho um elemento com estilo

position: relative;
transition: all 2s ease 0s;

Então, quero mudar sua posição suavemente depois de clicar nele, mas quando adiciono a mudança de estilo, a transição não ocorre, em vez disso, o elemento se move instantaneamente.

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

No entanto, se eu alterar a colorpropriedade, por exemplo, ela muda suavemente.

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

Qual pode ser a causa disso? Existem propriedades que não são 'transitórias'?

EDIT : Eu acho que deveria ter mencionado que isso não é jQuery, é outra biblioteca. O código parece funcionar conforme o esperado, estilos estão sendo adicionados, mas a transição só funciona no segundo caso?


2
Assumindo que $$ é um alias para jQuery, fazer [0] retornará um objeto dom nativo (em oposição a um objeto jquery) e não terá nenhum .on()método. Se não - o que é $$?
xec

Nada disso é válido, se você estiver usando jQuery não há nada chamado style (), e em JS nativo, certamente não funciona assim.
adeneo

1
Existe um conjunto de regras que podem ser transicionadas. consulte a Especificação W3
Goldentoa11

@ Goldentoa11 topparece estar na lista, o que elimina minha dúvida sobre topnão estar disponível para transições.
php_nub_qq

3
@php_nub_qq Verifique a resposta de adaneo e meu comentário a ela, pelo que parece você precisa começar com um topvalor definido (para 0, por exemplo) antes de alterá-lo (para 200 ou qualquer outro)
xec

Respostas:


188

Tente definir um valor padrão no css (para deixá-lo saber onde você deseja que comece)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

9
ou transition: top 1s ease 0s;para topúnica
Oleg Abrazhaev

16

Talvez você precisa especificar um valor superior em seu conjunto de regras css, de modo que ele vai saber o valor a animar de .


2

No meu caso, a posição div foi corrigida, adicionar a posição à esquerda não foi suficiente, ela começou a funcionar apenas após adicionar o bloco de exibição

left:0; display:block;


2

Algo que não é relevante para o OP, mas talvez para outra pessoa no futuro:

Para pixels ( px), se o valor for "0", a unidade pode ser omitida: right: 0e right: 0pxambos funcionam.

No entanto, notei que no Firefox e no Chrome este não é o caso da unidade de segundos ( s). Enquanto transition: right 1s ease 0sfunciona, transition: right 1s ease 0(unidade ausente spara o último valor transition-delay) não (ele faz o trabalho na borda no entanto).

No exemplo a seguir, você verá que rightfunciona para ambos 0pxe 0, mas transitionsó funciona para 0se não funciona com 0.

#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>



0

Corri para este problema hoje. Aqui está minha solução hacky.

Eu precisava de um elemento de posição fixa para fazer a transição de 100 pixels enquanto carregava.

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);
  }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.