Question

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

这是当前行为的一个小提琴。我需要中间框来交叉淡入淡出而没有丑陋的移动效果。我可以将它们放在另一个容器中并将它们放在那个容器中，但是有更优雅的方式吗？

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

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

1 个答案: