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

Posted 2023-05-08

【中文标题】交叉淡入淡出元素而不诉诸位置：绝对

【英文标题】：Crossfading elements without resorting to position: absolute

【发布时间】：2013-06-05 07:01:44

【问题描述】：

我正在尝试交叉淡化两个元素，以便一个替换另一个。显然，出现的元素必须在淡入之前放置到 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);

【参考方案1】：

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

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

【讨论】：

这行得通，但问题是另一个元素不会通过第一个元素淡入，它只是在过渡完成后出现。

不知道 CSS 将触发事件转换为 javascript，非常好！