Question

我有两个主要元素 - 一些文本在一行上有一个选择框，另一行上有一个带有gif微调器图像的div。最初，我将微调器设置为display：none。

尽管这是大型企业应用程序的一部分（因此事件处理等不是真正的问题）。但是每当发生某些事件时我想做什么（即点击按钮）：

隐藏的微调元素移动以确保使用文本+选择框完全覆盖线条，而不会使整个线条更大 - 理想情况下它应该恰好适合文本+选择框覆盖的确切空间
在微调器中平滑淡出并将背景元素淡出为100％白色

<div id="wrapper">
    on the <select id="select"></select> of the Month
<div id="spinner"></div>
</div>

#wrapper {
    margin: 50px;
}

#spinner {
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    display:none;
}

Answer 1

你可以在这里看到它：http://jsfiddle.net/jfriend00/8MJH4/。我在演示中延长了转换时间，因此您可以更清楚地看到转换工作。这是一个稍微高级的版本，可用作切换：http://jsfiddle.net/jfriend00/kwr4m/。

这个想法是你将微调器放在绝对位置（所以它位于文本的顶部），但最初opacity: 0是不可见的。然后，将文本的不透明度更改为0，将微调器的不透明度更改为1，并将两者设置为不透明度CSS过渡。这是代码：

JS：

function run() {
    var spinner = document.getElementById("spinner");
    var fadeText = document.getElementById("fadeText"); 

    // make spinner visible
    spinner.style.opacity = 1;

    // make text not visible
    fadeText.style.opacity = 0;
}

HTML：

<button id="go" onclick="run()">Go</button>
<div id="wrapper">
    <div id="fadeText" class="fadeTransition">
    on the <select id="select"></select> of the Month
    </div>
    <div id="spinner" class="fadeTransition"></div>
</div>

CSS：

#wrapper {
    margin: 50px;
    position: relative;
}

#spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
}

.fadeTransition {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

如何将隐藏元素移动到另一个元素上并平滑地淡入其中？

1 个答案: