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

91

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?

php_nub_qq
la source
2
En supposant que $$ est un alias pour jQuery, faire [0] retournera un objet dom natif (par opposition à un objet jquery) et n'aura aucune .on()méthode. Sinon, qu'est-ce que $$?
xec
Rien de tout cela n'est valide, si vous utilisez jQuery, il n'y a rien qui s'appelle style (), et dans JS natif, cela ne fonctionne sûrement pas comme ça.
adeneo
1
Il existe un ensemble de règles transitoires. voir les spécifications W3
Goldentoa11
@ Goldentoa11 topsemble être dans la liste, ce qui élimine mon doute sur le fait de topne pas être disponible pour les transitions.
php_nub_qq
3
@php_nub_qq Vérifiez la réponse d'adaneo et mon commentaire, à son apparence, vous devez commencer avec une topvaleur définie (à 0 par exemple) avant de la changer (en 200 ou autre)
xec

Réponses:

188

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 */
xec
la source
9
ou transition: top 1s ease 0s;pour topseulement
Oleg Abrazhaev
16

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 .

sarahholden
la source
2

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;

Sameh
la source
2

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>

LWChris
la source
0

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

Robert Shaw
la source
0

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);
  }
}
André Bradshaw
la source