通过使用 Javascript 删除类来触发 CSS 转换答案

【问题标题】：Triggering a CSS transition by removing a class with Javascript通过使用 Javascript 删除类来触发 CSS 转换
【发布时间】：2014-12-09 17:53:33
【问题描述】：

当我以编程方式从元素中删除一个类时，我无法弄清楚为什么我的 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 库！ :)

【问题讨论】：

您能否提供一个代码 sn-p (Ctrl+M) 或 jsfiddle.net 以便我们使用它？
我敢肯定，如果不给浏览器一些时间在两者之间重新绘制，您将无法执行您正在尝试的操作。您上面的所有代码都在一个执行周期内，这意味着当重新绘制屏幕时，浏览器并不关心您添加了该类然后将其删除 - 它只关心最终状态。您可能需要使用 setTimeout 错开对 UI 的更改
@Ian 太好了，感谢您的提示，我将对其进行测试并尽快报告。如果其他人在此期间有其他想法，请随时加入。
@Ian 你是对的！谢谢，这解决了它，尽管现在我意识到这是一种不适合美学的方法。无论如何，谢谢，虽然这让我发疯了，我在这个过程中学到了更多关于 js 的知识。

标签： javascript css css-transitions

【解决方案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>

【讨论】：