css - 如何在这个扰流板中加入淡入淡出过渡？

Question

我想在我的剧透中添加一个淡入淡出过渡，使用 CSS。这是代码：

HTML：

<button style="position:absolute;left:600px;top:20px" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">See the phrases</button>
<link rel='stylesheet' type='text/css' href='style/spoiler.css'/>
<div id="spoiler" style="display:none;position:absolute;left:600px;top:50px"> 
<desc1>&nbsp;My phrases:</desc1>
<desc2><ul><li>First phrase</li>
</ul><ul><li>Second phrase</li></ul>
</des2>
</div>

CSS：

  #spoiler
{
    background:#FCFB8B;
    width:280px;
    height:200px;
    -webkit-box-shadow: inset 0 0 3px #1f325d;
    -o-box-shadow: inset 0 0 3px #1f325d;
    -moz-box-shadow: inset 0 0 3px #1f325d;
    -ms-box-shadow: inset 0 0 3px #1f325d;
    box-shadow: inset 0 0 3px #1f325d;
}

#spoiler desc1

{
   font-family:Arial, Helvetica, sans-serif;
   font-size:18px;
   color:#FA4646;
}

#spoiler desc2
{
   font-family:Arial, Helvetica, sans-serif;
   font-size:16px;
   color:#000000;
   position:absolute;
   top:10px;
   left:-15px;
}

好吧，我试图把这段代码放在 ID 剧透中，但它不起作用。谁能帮我？

-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;

我尝试使用悬停并工作，但我需要在按下按钮时自动进行转换。我怎么能做到这一点？提前谢谢大家！

Answer 1

使用javascript添加一个类到剧透，CSS3动画但了解不使用CSS3的浏览器。

#spoiler {
opacity:0;
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
 transition: all .8s ease-in;
}

#spoiler.show {
opacity:1;
}

对于不支持 css3 的浏览器，我使用 Modernizr + jQuery 作为后备。

if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
  $('#spoiler').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
  $('#spoiler').addClass('show');
}