通过使用Javascript移除类来触发CSS转换

Question

当我以编程方式从元素中删除一个类时，我很难弄清楚为什么我的CSS转换没有启动。

从本质上讲，我试图使用纯Javascript创建一个逐渐增强的、无限滚动的旋转木马。

基本思想是，当用户点击向左或向右滚动时，第一个或最后一个元素会从父ul元素中提取，并根据用户点击的滚动方向进行预处理或附加到适当的位置。

以下是相关代码：

HTML:

<div id="scroller">
    <ul>
        <li>
            <a>
                <img src="...">
            </a>
        </li>
        ..... more li elements
        <li>
            <a>
                <img src="...">
            </a>
        </li>
    </ul>   
</div>

CSS：

#scroller {
    position: absolute;
    left: 0em;
    height: 8em;
    width: 400em;
}
#scroller ul {
    list-style: none;
}
#scroller ul li {
    overflow: hidden;
    float: left;
    height: 8em;
    width: 8em;
    transition: width 1s ease;
}
#scroller ul li.hide {
    width: 0em;
}
#scroller ul li a img {
    width: 8em;
}

JS（例如滚动右键点击事件）:

/** Remove the element from the end of the list, add the hide class */
var node = this.list.removeChild(this.items[(this.items.length - 1)]);
/** Add the hide class to the node */
node.className += ' hide';
/** Insert the node at the beginning of the scroller */
this.list.insertBefore(node, this.items[0]);
/** Remove the hide class to trigger the transition animation */
node.className = node.className.replace('hide', '');

就项目在ul中的正确移动而言，一切都很好，所以这不是问题所在。

问题是，当通过删除"hide"类来更改li元素的宽度时，CSS转换没有被应用。

我曾希望在浏览器中创建一个平滑的滚动效果，以支持CSS转换。

提前感谢您没有建议我使用JS库！：）

Answer 1

使用setTimeout和transitionend事件的组合。

查看此处了解有关transitionend的更多信息：CSS3转换事件

/** Remove the element from the end of the list, add the hide class */
one = document.getElementById('one');
two = document.getElementById('two');
list = document.getElementById('list');
/** Add the hide class to the node */
two.addEventListener('transitionend', end, false);
setTimeout(function(){
  two.className += ' hide';
}, 0)
function end(){
  /** Insert the node at the beginning of the scroller */
  list.insertBefore(two, one);
  /** Remove the hide class to trigger the transition animation */
  setTimeout(function(){
    two.className = two.className.replace('hide', '');
  }, 0)
}

#scroller {
    position: absolute;
    left: 0em;
    height: 8em;
    width: 400em;
}
#scroller ul {
    list-style: none;
}
#scroller ul li {
    overflow: hidden;
    float: left;
    height: 8em;
    width: 8em;
    transition: width 1s ease;
}
#scroller ul li.hide {
    width: 0em;
}
#scroller ul li a {
    width: 8em;
  background-color:red;
}

<div id="scroller">
    <ul id="list">
        <li id="one">
            <a>
              One
            </a>
        </li>
        <li id="two">
            <a>
              Two
            </a>
        </li>
    </ul>   
</div>