交叉淡入淡出元素而不诉诸位置：绝对

Question

我正在尝试交叉淡化两个元素，以便一个替换另一个。显然，出现的元素必须在淡入之前放置到 DOM 中。没有绝对定位，它会将其他元素移出位置，这是我需要避免的。

这里是当前行为的一个小提琴。我需要中间框交叉淡入淡出而没有丑陋的移动效果。我可能可以将两者都封装在另一个容器中并将它们绝对放置在其中，但是有没有更优雅的方法？

http://jsfiddle.net/b9yKE/

HTML：

<ul>
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
</ul>

CSS：

li {
    display: inline-block;
    width:60px;
    border: 1px solid;
    text-align: center;
}

.animate-opac {
    -webkit-transition: opacity 1.5s ease-out;
}

.fade {
    opacity: 0;
}

.hidden {
     display:none;   
}

JS：

var $new = $('<li id="twohalf">2.5</li>');
var $ul = $('ul');

window.setTimeout(function() {
    $('#two').toggleClass("animate-opac");
    $new.toggleClass("animate-opac fade");
    $('#two').after($new);

    $('body')[0].offsetWidth;

    $('#two').toggleClass("fade");
    $new.toggleClass("fade");

    $('#two').on("webkitTransitionEnd", function() {
         $(this).remove();   
    });
}, 500);

Answer 1

只需在过渡结束回调中用新元素替换元素 http://jsfiddle.net/b9yKE/4/

$('#two').toggleClass("animate-opac fade").one("webkitTransitionEnd", function() {
     $(this).replaceWith( $new );   
});