使用CSS動畫動畫div高度時出現問題

我試圖讓一個div在加載時進行動畫處理，縮放比例從0px到全高。下面是相關的CSS我迄今，在Chrome開發權，所以我現在只需要-webkit前綴：使用CSS動畫動畫div高度時出現問題

#teaserbar { 
    width: 100%; 
    overflow: hidden; 
    background-color: #333; 
    -webkit-animation-name: barAppear; 
    -webkit-animation-duration: 3s; 
} 

@-webkit-keyframes barAppear { 
    from { 
    height: 0; 
    } 
    to { 
    height: auto; 
    } 
}

和相關的HTML：

<div id="teaserbar"> 
    <div class="container"> 
    <div class="sixteen columns clearfix"> 
     <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p> 
    </div> 
    </div> 
</div>

我有一點成功獲得動畫實際上工作 - 起初我認爲這可能是一個縮放高度的問題，但我沒有成功動畫div的背景顏色。如果有人認爲這可能有助於解決我的問題，我可以提供完整的匿名來源。

有什麼建議嗎？我覺得我必須錯過一些相當明顯的東西，因爲我過去曾經使用CSS動畫工作。

編輯：在http://jsfiddle.net/XYfE9/

來源

2013-03-25 pagibson

做出小提琴.. – 2013-03-25 16:47:22

有點無關緊要的：-webkit不再是必要的。所有Chromium瀏覽器都完全實現了CSS3。 – cygorx 2013-03-25 16:49:14

謝謝，@Mr_Green，在底部添加了一個小提琴的鏈接。 – pagibson 2013-03-25 16:52:28

正如其他人在評論中所指出的那樣製成每Mr_Green的建議小提琴，可用，CSS動畫似乎並不支持使用auto高度值，有一個解決方案是改爲使用固定高度。

如果您需要支持動態高度，可以使用jQuery測量高度，然後將測量的高度應用於動畫。

一種可能的方法是在#teaserbar附近添加一個容器。將容器設置爲測量的高度，並將動畫的開始和結束值分別設置爲0％和100％。對於固定高度容器中的元素，使用0％和100％的快速測試是成功的。不知道這種解決方案是否會給頁面佈局帶來問題，但是可能有其他方法可以使用測量的高度，而這種方法不會這樣做。

演示（靶向的Webkit瀏覽器只）

Fixed-height container （無jQuery的）
Dynamic-height container （用了jQuery）

HTML

<div id="container"> 
    <div id="teaserbar"> 
     <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p> 
    </div> 
</div>

CSS

@-webkit-keyframes barAppear { 
    from { 
     height: 0% 
    } 
    to { 
     height: 100%; 
    } 
}

jQuery的

$(document).ready(function(){ 
    $('#container').height($('#teaserbar').height()); 
});

來源

2013-03-25 17:00:46

使用CSS動畫動畫div高度時出現問題

回答

相關問題