当节点结构变化的时候要重新获取 不然之前的变量还是以前的节点结构

 

 

function $$(name){

return document.querySelectorAll(name);

}

var list=$$(".message ul li");

var ul=list[0].parentNode;

var len=list.length;

function scroll (){

     var last=ul.children[len-1];

    ul.prepend(last);

    last.style.opacity="0";

setTimeout(function(){

         last.style.opacity="1";

},300);

    }

//运行之后 没有得到想要的结果  按道理说 是每次都是最后一个插到第一个 并且透明度由1-0-1

当然要用css3  transition:0.5s; 

但是这么如果写上面的代码的话  永远都是33333  发生变化  而不是每次变化后的最后一个元素 发生动画

这是因为  当变化ul结构以后 就需要重新获取ul 这样才能得到最新的ul最后一个元素

发生动画改变

var ul=list[0].parentNode; 把这句代码 放到函数里面就好了

function scroll(){
var ul=list[0].parentNode;
var last=ul.children[2];
ul.prepend(last);         //把元素添加到0位置
last.style.opacity="0";
setTimeout(function(){

last.style.opacity="1";
},500)

}

var timer=null;
clearInterval(timer);
timer=setInterval(function(){

scroll();

},3000);

在加一个定时器  就可以实现动画了