我在使用css3轉(zhuǎn)場時(shí)遇到問題 我怎樣才能讓過渡變得平穩(wěn)它會(huì)立即出現(xiàn) 我希望當(dāng)我懸停在div框上時(shí)，它會(huì)慢慢改變高度

html代碼

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

jsfiddle

我相信你需要設(shè)置一個(gè)指定的高度，而不是自動(dòng)。http://jsfiddle.net/BN4Ny/這做了一個(gè)平滑的擴(kuò)展。不確定你是否想要那種小的開合效果。我只是叉了你的jsfiddle，加了一個(gè)指定的高度。

這種解決方案不需要javascript，也不存在需要事先確定容器高度的問題。

這可以通過使用max-height屬性并將其值設(shè)置為較高的值來實(shí)現(xiàn)。

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}

<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>

而不是在容器上使用一個(gè)固定的高度或者使用JS(這兩個(gè)都是笨拙的解決方案)...您可以將圖像放在列表項(xiàng)中，并在li上進(jìn)行過渡。

如果所有的圖片都在一個(gè)相似的高度，這意味著你的容器中的內(nèi)容仍然是動(dòng)態(tài)的。例如...

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

你可以這樣做:http://jsfiddle.net/minitech/hTzt4/

為了保持靈活的高度，不幸的是，JavaScript是必須的。

我用這個(gè)方法: 使用“最大高度”來轉(zhuǎn)換高度，而不是直接轉(zhuǎn)換高度... 例如:

div {
     height: auto;
     max-height:0;
 }

   .toggle-above-div:hover div {
    max-height:0;
  }

使用網(wǎng)格，您可以在不增加元素特定高度的情況下使用過渡。

document.querySelector("button").addEventListener("click", e => {
  document.querySelector(".wrapper").classList.toggle("open")
})

.content{
  min-height: 0;
  text-align: justify;
}

.wrapper{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 200ms;
  width: 300px;
}

.wrapper.open {
  grid-template-rows: 1fr;
}

<button>Toggle</button>
<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quantum Aristoxeni ingenium consumptum videmus in musicis? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Quamquam tu hanc copiosiorem etiam soles dicere. Hoc est non modo cor non habere, sed ne palatum quidem. Non est ista, inquam, Piso, magna dissensio. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quod cum dixissent, ille contra.
  </div>
</div>