国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>Saya cuba menggunakan peralihan CSS untuk membuat <kod></code></p><ul> <p><br /></p> <p><kod></kod></p><ul> Bermula pada <kod>tinggi: 0;</kod>. Semasa tuding, ketinggian ditetapkan kepada <code>height:auto;</code>. Walau bagaimanapun, ini menyebabkan ia hanya muncul, <em> tanpa peralihan <p><br /></p> <p>Jika saya beralih daripada <kod>tinggi: 40px;</kod> kepada <kod>tinggi: auto;</kod> /code> dan kemudian tiba-tiba melompat ke ketinggian yang betul. </p> <p>Bagaimana lagi saya boleh melakukan ini tanpa menggunakan JavaScript? </p> <p><br /></p> <pre class="brush:css;toolbar:false;">#child0 { ketinggian: 0; limpahan: tersembunyi; warna latar belakang: #dedede; -moz-transition: ketinggian 1s mudah; -webkit-transition: ketinggian 1s mudah; -o-peralihan: ketinggian 1s mudah; peralihan: ketinggian 1s mudah; } #parent0:hover #child0 { ketinggian: auto; } #child40 { ketinggian: 40px; limpahan: tersembunyi; warna latar belakang: #dedede; -moz-transition: ketinggian 1s mudah; -webkit-transition: ketinggian 1s mudah; -o-peralihan: ketinggian 1s mudah; peralihan: ketinggian 1s mudah; } #parent40:hover #child40 { ketinggian: auto; } h1 { font-weight: tebal; }</pre> <pre class="brush:html;toolbar:false;">Satu-satunya perbezaan antara dua coretan CSS ialah satu mempunyai ketinggian: 0, satu lagi ketinggian: 40. <hr> <div id="parent0"> <h1>Tuding saya (ketinggian: 0)</h1> <div id="child0">Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br> </div> </div> <hr> <div id="parent40"> <h1>Tuding saya (ketinggian: 40)</h1> <div id="child40">Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br>Sesetengah kandungan <br> </div> </div></pre> <p><br /></p></ul></ul>

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}

<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>