交叉渐变元素而不求助于位置:绝对

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