javascript - 通过使用 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 正确移动的元素而言，一切正常，所以这不是问题。

问题是当通过删除“隐藏”类更改 li 元素的宽度时，CSS 过渡没有被应用。

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

提前感谢您没有建议我使用 JS 库! :)

Answer 1

使用 setTimeout 和 transitionend 事件的组合。

在此处查看有关 transitionend 的更多信息: CSS3 transition events

/** 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>