動畫DIV在高度和寬度上的變化

-1

如何動畫div在高度和寬度上的變化？不會有觸發動畫的事件，但是隨着（this）div的大小發生變化，就會出現動畫。這個想法是當div中有更多或更少的內容時，動態調整div的大小。動畫DIV在高度和寬度上的變化

來源

2012-10-24 Kevin

使用[CSS過渡（https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions）。 –

恭喜！這個模糊的問題。 – gdoron

@gdoron：問題如何模糊？ – Kevin

在CSS3中，您可以在任何元素上設置'transition'屬性，這將爲您提供所需的效果，而無需擔心事件觸發。

可以指定動畫的屬性，持續時間和功能（類型），如下所示：

#divWithAnimation 
{ 
    transition: height 1s linear; 
}

雖然屬性「過渡」不支持IE，其他瀏覽器使用自己的前綴，如下所示：

#divWithAnimation 
{ 
    -webkit-transition: height 1s linear; 
    -moz-transition: height 1s linear; 
    -ms-transition: height 1s linear; 
    -o-transition: height 1s linear; 
    transition: height 1s linear; 
}

您應該在樣式表中使用所有這些，以便提供sup所有可用瀏覽器的端口。有關過渡（以及CSS3的其他酷炫功能）的更多信息和教程可以在W3Schools website上找到。

有一個非常不錯的CSS3 generator可以生成所有瀏覽器的代碼。肯定會推薦它。

來源

2012-10-24 08:07:16

CSS3轉換是確實做到這一點的最好方式 - 非常乾淨，並且讓瀏覽器能夠完成工作。但是，如果你需要在IE中支持jQuery，animate是一個不錯的選擇。

它不像它那麼簡單，因爲你不能在一個div上聽resize()，只是一個窗口。

有一些可用的插件不過，像這樣的：http://www.jqui.net/demo/mutate/

來源

2012-10-24 08:58:33

動畫DIV在高度和寬度上的變化

回答

相關問題