0

クラスが適用された後に要素の高さをアニメーション化しようとしています。簡略化されたコードは次のとおりです。

HTML

<div class="section">
  <div class="panel">
    <a href="#" class="toggle">Click</a>
    <div class="panel-content">
      Some content...
    </div>
  </div>
</div>

CSS

.section {
  position: relative;
  width: 500px;
  height: 200px;
  margin: 100px auto;
  background: #ccc;
}

.panel {
  width: 65%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.toggle {
  display: inline-block;
  height: 15px;
  background: #ddd;
}

.panel-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
}

.active .panel-content {
  max-height: 9999px;
}

JS

$(function() {
  $('.toggle').on('click', function (e) {
    e.preventDefault();
    $(this).closest('.panel').toggleClass('active');
  });
});

.toggleリンクをクリックすると、高さをアニメーション化するために要素にactiveクラスが設定されますが、クラスが最初に追加されるとコンテンツがアニメーションなしで表示され、要素が削除されるとアニメーション化を開始するのに 1 秒 (トランジションの期間) かかります。ここでライブ デモを見ることができます: http://codepen.io/javiervd/pen/bLhBa.panel.panel-content

位置とオーバーフローのプロパティも試してみましたが、うまくいきませんでした。同じ効果を達成する別の方法があるのでしょうか?

前もって感謝します。

4

1 に答える 1

2

transition何かが起こったときに行う必要があります。これはあなたが望んでいるものではありませんが、何かお見せしましょう:

.pannel-content{
  height:0;
}
.pannel-content:hover{
  height:50px; transition:height 2s;
}

これが仕組みtransitionです。アクションを作成していません。クリック疑似クラスはありません。とにかく同じ要素に影響を与えたくありません。jQueryなどを使ってみてください。

<html>
  <head>
    <style type='text/css'>
      .active .pannel-content{
        display:none; height:9999px;
      }
    </style>
  </head>
<body>
  <div class='section'>
    <div class='panel'>
      <a href='#' class='toggle'>Click</a>
      <div class='panel-content'>
        Some content...
      </div>
     </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type='text/javascript'>
    $('.toggle').click(function(){
      $('.active .pannel-content').show('slow');
    });
  </script>
</body>
</html>

jQuery の.animate()メソッドを使用することもできます。もちろん、DOCTYPE を宣言し、<meta>タグを使用することをお勧めします。また、ユーザーのブラウザ メモリにキャッシュされるため、外部 CSS を使用する必要があります。詳細については、 http://api.jquery.com/show/ および http://api.jquery.com/animate/
を参照してください。

于 2013-06-22T21:33:25.453 に答える