javascript - CSS3 和 Javascript : fade text out and then in using the same function

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

实际上我不久前就同一问题问了一个非常相似的问题:Opacity effect works from 1.0 to 0, but not 0 to 1.0 .检查一下，看看它是否适合您。

否则，尝试向 fader 元素添加一个类而不是添加样式声明。然后，在您的实际 CSS 中，编写渐变元素转换的代码。