javascript - jQuery .append() 不同步？

Question

我的目标是在 div 上添加悬停类，并对其产生过渡效果。但是我需要先将元素附加到父元素，只是为了让它始终位于其他元素之上。这是在 z-index 不可用时模拟 z-index 效果的技巧(例如，SVG 没有 z-index)。

但是在示例1中，过渡效果不起作用。我的假设是 addClass() 发生在元素完成附加之前。所以过程是这样的，

call append() => add class to element => transition starts => append element, and the current transition is cancelled => append() finish => no other transition happens

为了证明我的假设，在示例 2 中，我使用 setTimeout() 调用来环绕 addClass()。在这种情况下，过渡工作正常。

那么我的假设是否正确呢？示例 2 中的解决方案是解决此问题的巧妙方法吗？请帮忙，谢谢!

$('.inner').hover(function(){
    var item = $(this)
    item.parent().append(this);
    if ($('#sel').val() == "1") {
        item.addClass("hover");
    } else {
        setTimeout(function(){
            item.addClass("hover");
        }, 0)
    }    
}, function(){
    $(this).removeClass("hover");
});

.inner {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #999;
    transform: scale(1.0);
    transition: all 0.3s ease-in;
}
.inner.hover {
    transform: scale(1.1)
}
.outer {
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner" style="left: 0px;">1</div>
    <div class="inner" style="left: 100px;">2</div>
    <div class="inner" style="left: 200px;">3</div>
</div>
<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Answer 1

是的，你的假设是正确的。发动机removes the element from the DOM and adds it back ($.append 使用 appendChild)。这就是 setTimeout 正常工作的原因。