CSS3 和 Javascript:淡出文本，然后使用相同的函数

Question

我正在尝试使用 JavaScript 和 CSS3 创建淡出和淡入淡出的效果。 目标是在单击时缩小div 的宽度，并同时淡出其中包含的文本。 然后，当再次单击它时，div 会扩展回其正常宽度，文本会淡入。

这是 HTML：

<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>  

这是 CSS：

  #box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

这是javascript：

var box1
var fader
window.onload = function() {
    box1 = document.getElementById('box1');
    fader = document.getElementsByClassName('fader');
    } 
function slide1(){
if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
    }
 else {
    box1.style.width='10%';
 fader[0].style.opacity='0';
    fader[0].style.transition='opacity 0.75s ease-in';
 }
}

它适用于淡出，但对于淡入，它立即从 0 不透明度过渡到 1 不透明度......没有淡入。 有什么想法吗？

Answer 1

不久前我实际上问了一个非常相似的问题：不透明度效果从 1.0 到 0 有效，但不适用于 0 到 1.0。检查一下，看看它是否适合您。

否则，请尝试向推子元素添加类，而不是添加样式声明。然后，在实际的 CSS 中，编写推子元素过渡的代码。

Answer 2

我猜你甚至使用火狐或歌剧？我认为您的代码不适用于 safari 或 chrome，因为过渡在这些浏览器上需要 webkit 前缀。可以使用以下代码获取转换支持：

var transform = (function () {
    var transforms = [
        'OTransform',
        'MozTransform',
        'msTransform',
        'WebkitTransform'
        ], transform = 'transform';
    while (transform) {
        if (document.body.style[transform] === undefined) {
            transform = transforms.pop();
        } else {
            return transform;
        }
    }
    return false;
}());

当im使用CSS过渡时，有时我会更改过渡样式，然后让浏览器在更改其他样式之前更新更改。您可以通过超时执行此操作。在某些浏览器上，我注意到动画除非这样做（某些火狐浏览器），否则动画不起作用。

fader[0].style.transition='opacity 0.75s ease-in';
setTimeout(function () {
    box1.style.width='10%';
    fader[0].style.opacity='0';
}, 4);