Les manifestes de transition Css uniquement à l'intérieur de la fonction de temporisation

Question

J'ai créé un nouveau div utilisant JavaScript et défini sa largeur et sa hauteur. Immédiatement après, j'ai besoin de le redimensionner à 100% de largeur avec effet de transition. Mais il se manifeste uniquement lorsque l'édition de styles est à l'intérieur de la fonction Timeout. Sans cela, il suffit de sauter à une nouvelle largeur.

Css:

#project-detail { 
    @extend .project-detail-preview; 
    transition: width 0.25s ease-out, top 0.25s ease-out, left 0.25s ease-out, height 0.25s ease-out; 
} 

Script:

var detailContainer = document.createElement("div"); 
    detailContainer.id = "project-detail"; 
    detailContainer.innerHTML = previewContent.innerHTML; 
    detailContainer.style.width = previewWidth; 
    detailContainer.style.height = previewHeight; 

    blocksContainer.appendChild(detailContainer); 

    for (let project of source.projects) { 
    if(project.id == projectID) { 
     setTimeout(function() { 
     detailContainer.style.width = "100%"; 
     }, 1); 
    } 
    } 

Answer 1

Je crois que c'est parce que vous ajoutez la div au DOM, et immédiatement (ligne de code suivante), vous redimensionner à 100% de largeur.

Le problème est que dans le cycle de vie de la page, le CSS n'a pas le temps de rattraper et d'appliquer entre ces deux lignes de code. Donc, la durée de transition n'est pas encore appliquée, et vous avez déjà redimensionné la div, donc elle saute immédiatement à 100%. D'autre part, lorsque vous définissez un Timeout, étant asynchrone, la fonction à l'intérieur du Timeout est exécutée à la fin de la pile d'exécution, c'est-à-dire après l'application des règles CSS aux éléments nouvellement créés. Vous pouvez même définir un délai de 0 ou aucun délai, cela fonctionnera tout de même.

Answer 2

JS est un seul thread si vous changez la largeur à 20 puis à 100, le passage à 20 est comme si n'a pas eu lieu. donc vous devez utiliser un setTimeout() donc il change d'abord à 20, et "plus tard" il change à 100

Answer 3

J'ai essayé de faire des choses comme ça avec JS, même lire des tas d'articles sur requestAnimationFrame et compris, que des choses comme ça à faire avec les classes CSS. Essayez de basculer la classe sur l'action:

for (let project of source.projects) { 
    if(project.id == projectID) { 
     detailContainer.className += ' fullwidth-class'; 
    } 
} 

Et ajoutez même classe CSS:

.fullwidth-class { 
    width: 100%!important; 
} 
#project-detail { 
    animation-duration: 1s; 
}