Animation de liste non ordonnée extensible, problème de rendu

Question

J'essaye d'animer une liste extensible, mais j'ai du mal à afficher correctement la liste. Sans liste d'effets d'animation s'affiche correctement (expand/collapse). Pour réduire la liste J'utilise ul.style.visibility = "hidden"; ul.style.height = "0px";. Sans effet d'animation, indiquez si cela vous convient:

.

Les bordures noires sont sur l'élément UL. J'utilise code Javascript suivant pour développer la liste:

var from = 0; //The height 
ul.style.height = "auto"; //set height to auto to get actual height 
var to = ul.offsetHeight; //get height 
ul.style.height = "0px"; 
ul.style.visibility = "visible"; 
ul.style.overflow = "hidden"; 

var start = new Date().getTime(), 
    timer = setInterval(function() { 
     var step = Math.min(1,(new Date().getTime()-start)/400); 
     ul.style.height = (from+step*(to-from))+"px"; 
     if(step == 1) clearInterval(timer); 
    },20); 
//Expand List 
ul.style.overflow = "inherit"; 
ul.style.height = "auto"; 
ul.style.visibility = "inherit"; 

ul dans le code est fait référence aux ul éléments dans la liste non ordonnée en cours d'extension.

Mais après avoir utilisé ce code pour animer le comportement d'expansion, la largeur de l'élément externe ul ne change pas avec l'expansion de l'élément interne . Cependant l'animation fonctionne très bien, mais la liste est à la recherche comme ceci:

Quand je commenter //ul.style.height = (from+step*(to-from))+"px"; de setInterval, la liste est affichée correctement (mais pas d'effet d'animation).

Pouvez-vous s'il vous plaît signaler une erreur, pourquoi ne pas la largeur de ul externe changeant avec expansion des intérieure ul

Answer 1

La raison pour laquelle il ne s'affiche pas correctement lorsque l'intervalle se termine est parce que vous assignez « auto » à ul .style.height avant l'intervalle a même exécuté son premier intervalle. Vous devriez le faire lorsque l'intervalle se termine:

timer = setInterval(function() { 
    var step = Math.min(1,(new Date().getTime()-start)/400); 
    if (1 === step) { 
     ul.style.height = "auto"; 
     clearInterval(timer); 
    } else { 
     ul.style.height = (from+step*(to-from))+"px"; 
    } 
},20);