0

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;

ホバーで試してみましたが、ボタンが押されたときに自動的に遷移する必要があります。どうすればこれを行うことができますか？よろしくお願いします！

4

1 に答える 1

0

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');
}
于 2013-03-20T17:25:48.247 に答える