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 transition events

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: