transition CSS position ne fonctionne pas du tout lorsqu'il est réglé avec JavaScript

Question

Je veux faire les choses suivantes:

1. montrent un élément div;
2. le déplacer dans une position initiale;
3. définir les propriétés de transition;
4. déplacez-le vers la position cible en utilisant la transition CSS.

Un exemple minimal:

function bla() { 
 
    /* 
 
    var obj = $('#box'); 
 
    obj.css("left", "200px"); 
 
    obj.css("display", "initial"); 
 
    obj.addClass("trans"); 
 
    obj.css("left", "500px"); 
 
    */ 
 

 
    var elem = document.getElementById('box'); 
 
    elem.style.left = "200px"; 
 
    elem.style.display = "initial"; 
 
    elem.className = "box trans"; 
 
    elem.style.left = "500px"; 
 
}

#btn { 
 
    position: fixed; 
 
    top: 60px; 
 
    left: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #FEDCBA; 
 
} 
 
.box { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #ABCDEF; 
 
} 
 
.box.trans { 
 
    -webkit-transition: left 2s; 
 
    -moz-transition: left 2s; 
 
    transition: left 2s; 
 
}

<div id="box" class="box"></div> 
 
<div id="btn" onclick="bla()">click here</div>

JSFiddle.

Cela ne fonctionne pas du tout. Qu'est-ce qui ne va pas?

Si je mets l'élément initialement visible, je reçois une transition en douceur à partir de l'origine left:0 qui est tout à fait étrange parce que je cède elem.style.left = "200px";avant ajouter réellement les propriétés de transition ...

Answer 1

Je ne peux pas expliquer Pourquoi. Peut-être que quelqu'un pourrait, je serais curieux aussi, mais avec un travail de temporisation.

setTimeout(function(){ 
    elem.style.left = "500px"; 
},1); 

Il est probablement trop rapide assignant des propriétés gauche 500 et la transition pour enregistrer l'ancien emplacement 200?

https://jsfiddle.net/StepBaro/s82rj48q/2/

Answer 2

Il est parce que vous avez le div caché, il faut d'abord l'afficher, puis ajouter la transition, c'est pourquoi il a besoin du retard.

Answer 3

Vous devriez éviter d'utiliser le style en javascript, il suffit de changer de classe les années mettent toute votre animation dans votre fichier css.

Vous ne pouvez pas mettre transition avec display: none;, vous devez utiliser opacity: 0; à la place.

function bla() 
 
{ 
 
\t var obj = $('#box'); 
 
\t obj.toggleClass("trans"); 
 
}

#btn 
 
{ 
 
    position:fixed; 
 
    top:60px; 
 
    left:0px; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:#FEDCBA; 
 
} 
 

 
.box 
 
{ 
 
    opacity: 0; 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:#ABCDEF; 
 
    -webkit-transition: transform 2s,opacity 2s; 
 
    transition: transform 2s,opacity 2s; 
 
} 
 

 
.box.trans 
 
{ 
 
    opacity: 1; 
 
    -ms-transform: translate(500px,0); /* IE 9 */ 
 
    -webkit-transform: translate(500px,0); /* Safari */ 
 
    transform: translate(500px,0); 
 
\t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" class="box"> 
 
</div> 
 
<div id="btn" onclick="bla()"> 
 
click here 
 
</div>