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');
}

如何在这个扰流板中进行淡入淡出过渡？

1 个答案: