附加和前置元素的CSS转换？

Question

我在列表中附加和前置以创建我自己的滑块，但我注意到该行为不是向前和向后相同的。我认为它与回流有关in this question.我如何解决这个问题，以便追加第一个孩子，并在前一个孩子前面进行同样的过渡？

HERE IS A FIDDLE

点击滑块下面的按钮

function classes(){ //This works well.  
    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1098.53px

    $('#nikoSlider ul').append($('#nikoSlider li:first-child')) 

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //0px
    middleSpan(1);
}

function backClasses(){//This delays.   

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1104px   

    $('#nikoSlider ul').prepend($('#nikoSlider li:last-child')) 

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1104px

    middleSpan(-1); 
}

和css：

#nikoSlider li:first-child{ 
    margin-left:-100vw;
}

#nikoSlider li{
   transition: color 3s, margin .5s, opacity .5s, transform 2s;
   margin:0;
}