La transition CSS ne fonctionne pas avec le haut, le bas, la gauche, la droite

J'ai un élément avec style

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

Ensuite, je veux changer sa position en douceur après avoir cliqué dessus, mais lorsque j'ajoute le changement de style, la transition n'a pas lieu, mais l'élément se déplace instantanément.

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

Cependant si je change la colorpropriété par exemple, cela change en douceur.

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

Quelle pourrait en être la cause? Y a-t-il des propriétés qui ne sont pas «transitoires»?

EDIT : J'imagine que j'aurais dû mentionner que ce n'est pas jQuery, c'est une autre bibliothèque. Le code semble fonctionner comme prévu, des styles sont ajoutés, mais la transition ne fonctionne que dans le second cas?

Essayez de définir une valeur par défaut dans le css (pour lui indiquer où vous voulez qu'il commence)

CSS

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

Peut-être que vous avez besoin de spécifier une valeur supérieure dans votre jeu de règles css, afin qu'il saura quelle valeur Animer de .

Dans mon cas, la position div a été fixée, l'ajout de la position gauche ne suffisait pas, cela n'a commencé à fonctionner qu'après l'ajout d'un bloc d'affichage

left:0; display:block;

Quelque chose qui n'est pas pertinent pour le PO, mais peut-être pour quelqu'un d'autre dans le futur:

Pour pixels ( px), si la valeur est "0", l'unité peut être omise: right: 0et les right: 0pxdeux fonctionnent.

Cependant j'ai remarqué que dans Firefox et Chrome ce n'est pas le cas pour l'unité des secondes ( s). Alors que les transition: right 1s ease 0stravaux, transition: right 1s ease 0(unité manquante spour la dernière valeur transition-delay) ne pas (il fait cependant le travail Edge).

Dans l'exemple suivant, vous verrez que cela rightfonctionne pour les deux 0pxet 0, mais transitionne fonctionne que pour 0set cela ne fonctionne pas avec 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>

Y a-t-il des propriétés qui ne sont pas «transitoires»?

Réponse: Oui .

Si la propriété n'est pas répertoriée ici, elle n'est pas «transitoire» .

Référence: Propriétés CSS animables

J'ai rencontré ce problème aujourd'hui. Voici ma solution hacky.

J'avais besoin d'un élément de position fixe pour effectuer une transition de 100 pixels lors du chargement.

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);
  }
}