web-dev-qa-db-ja.com

CSS3トランジションの展開/折りたたみを追加

展開/折りたたみトランジションを追加するにはどうすればよいですか？

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
.more {
    display: none;
    padding-top: 10px;
}

a.showLink,
a.hideLink {
    text-decoration: none;
    -webkit-transition: 0.5s ease-out;
    background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
    <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
    <div id="example" class="more">
        <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>
    </div>
</div>

http://jsfiddle.net/Bq6eK/1

javascripthtmlcsscss3
38
Felix

これ は、高さを自動的に調整する私のソリューションです：

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
  document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}
#more-button {
  border-style: none;
  background: none;
  font: 16px Serif;
  color: blue;
  margin: 0 0 10px 0;
}

#grow input:checked {
  color: red;
}

#more-button:hover {
  color: black;
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
}
<input type="button" onclick="growDiv()" value="Read more" id="more-button">

<div id='grow'>
  <div class='measuringWrapper'>
    <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
      amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
  </div>
</div>

R3belが投稿した回避策を使用しました： CSS3を使用して、高さ：0からコンテンツの可変高さに移行できますか？

33
Felix

this は動作するはずです。しばらく試してみなければなりませんでした。：D

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID + '-show').style.display != 'none') {
      document.getElementById(shID + '-show').style.display = 'none';
      document.getElementById(shID + '-hide').style.display = 'inline';
      document.getElementById(shID).style.height = '100px';
    } else {
      document.getElementById(shID + '-show').style.display = 'inline';
      document.getElementById(shID + '-hide').style.display = 'none';
      document.getElementById(shID).style.height = '0px';
    }
  }
}
#example {
  background: red;
  height: 0px;
  overflow: hidden;
  transition: height 2s;
  -moz-transition: height 2s;
  /* Firefox 4 */
  -webkit-transition: height 2s;
  /* Safari and Chrome */
  -o-transition: height 2s;
  /* Opera */
}

a.showLink,
a.hideLink {
  text-decoration: none;
  background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
  background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
  <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
  <div id="example" class="more">
    <div class="text">
      Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </div>
    <p>
      <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>
    </p>
  </div>
</div>
8
r3bel

http://jsfiddle.net/Bq6eK/215/

このソリューションのコードを変更したのではなく、独自に作成しました。私のソリューションは、あなたが求めていたものとはまったく異なりますが、既存の知識を基に構築することができます。コードにもコメントを付けたので、変更内容を正確に把握できます。

「JavaScriptで高さを設定しないようにする」ためのソリューションとして、私は 'maxHeight'をtoggleHeightと呼ばれるJS関数のパラメーターにしました。これで、展開可能なクラスの各divのHTMLで設定できます。

私はこれを前もって言います、私はフロントエンド言語にあまり慣れていないので、アニメーションを開始する前に最初に「表示/非表示」ボタンを2回クリックする必要があるという問題があります。焦点を絞った問題だと思う。

私のソリューションの他の問題は、divをクリックしてドラッグするだけで、表示/非表示ボタンを押すことなく、非表示のテキストが実際に把握できることです。表示されていないテキストを強調表示し、表示可能なスペースに貼り付けることができます。

私がやったことの上にある次のステップに対する私の提案は、表示/非表示ボタンが動的に変更されるようにすることです。 JSでテキストを表示したり隠したりすることについて既に知っているように見えることで、その方法を理解できると思います。

1
user1530315

これは、JSをまったく使用しないソリューションです。代わりに checkboxes を使用します。

これをCSSに追加すると、チェックボックスを非表示にできます。

.container input{
    display: none;
}

そして、スタイリングを追加して button のようにします。

これが私が変更したソースコードです

0
user1530315

OMG、私は何時間もこれに対する簡単な解決策を見つけようとしました。コードは単純なものでしたが、誰も私が望むものを提供してくれませんでした。それでようやく、サンプルコードを作成し、誰もがJQueryを使用せずに簡単に使用できるようにしました。単純なJavaScriptとCSSおよびHTML。アニメーションが機能するためには、高さと幅を設定する必要があります。そうしないと、アニメーションが機能しません。難しい方法を見つけました。

<script>
        function dostuff() {
            if (document.getElementById('MyBox').style.height == "0px") {

                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
            }
            else {
                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
             }
        }
    </script>
    <div id="MyBox" style="height: 0px; width: 0px;">
    </div>

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
0
Deathstalker