CSS轉換：爲「高度」風格的內聯樣式之間的動畫屬性

我試圖使用CSS3轉換爲通過Javascript動態設置的內聯樣式屬性;我正在用AngularJS一個項目，該項目通過插值使用插值$範圍變量的風格標籤裏面，像這樣：CSS轉換：爲「高度」風格的內聯樣式之間的動畫屬性

我已經定義了一個過渡類，像這樣：

.growing-object { 
    -webkit-transition: background 1000ms ease-out, height 1000ms ease-out; 
    -moz-transition: background 1000ms ease-out, height 1000ms ease-out; 
    -ms-transition:  background 1000ms ease-out, height 1000ms ease-out; 
    -o-transition:  background 1000ms ease-out, height 1000ms ease-out; 
    transition:   background 1000ms ease-out, height 1000ms ease-out; 
}

的我似乎遇到的問題很奇怪。樣式屬性將在Webkit和Firefox中生成動畫，而且看起來不錯。但是，height樣式屬性完全不具有動畫效果（實際上，當值首先更改時會引起一些奇怪的問題）。

有沒有人遇到過這個？在我看來，height在從一個內聯樣式值到下一個樣本值平滑補間方面的行爲應與background-position的行爲方式相同，但在這裏似乎不是這種情況。我遇到一些油漆問題或什麼？我知道我可以使用jQuery或簡單的Javascript作爲後備，但我寧願不必這樣做，除非我絕對必須這樣做。

感謝您的幫助！

來源

2013-09-21 jedd.ahyoung

你知道這件事嗎？ http://www.nganimate.org/。這似乎不是一個很好的做法_in_ __ – elclanrs

@elclanrs我知道 - 我實際上使用的是Angular 1.2.0，它內置了對動畫的支持。但是，這並不是我所需要的 - 我不需要'ng-enter'和'ng-leave' - 我特別需要調整增長的對象的高度。（這是我製作的遊戲的圖形部分。） –

我編輯了這篇文章，讓事情變得更加清晰。請注意，這不是用於顯示/隱藏的目的 - 這是因爲計數器變量，不斷增長的div（以可變比率）。 –

好吧，看起來我錯了 - 這確實有效，但以編程方式滾動到頁面底部的組合導致了感知轉換的問題。我在這裏工作（http://jsfiddle.net/jDZfY/），並意識到其他問題導致了這個問題，並找到了一種解決方法，目前似乎正在開展工作。

測試用例HTML：

<body data-ng-app=""> 
    <div data-ng-controller="controller"> 
    <div class="background transition" style="width: {{width}}px; height: {{height}}px; background-position: {{bgPos}}px 0px;"> 

    </div> 
    <button data-ng-click="bgPos = bgPos + 50">Change background position</button> 
    <button data-ng-click="height = height + 50">Change height</button> 
    </div> 
</body>

測試用例JS：

function controller($scope) { 
    $scope.height = 200; 
    $scope.width = 500; 

    $scope.bgPos = 0; 
}

測試用例CSS：

.transition { 
    -webkit-transition: background 1000ms ease-out, height 1000ms ease-out; 
    -moz-transition: background 1000ms ease-out, height 1000ms ease-out; 
    -ms-transition:  background 1000ms ease-out, height 1000ms ease-out; 
    -o-transition:  background 1000ms ease-out, height 1000ms ease-out; 
    transition:   background 1000ms ease-out, height 1000ms ease-out; 

} 

.background { 
    background: url('http://placehold.it/100x100'); 
}

來源

2013-09-24 01:21:53

設置爲內聯的元素不能具有像高度，填充和邊距等屬性。你需要使用內聯塊。元素仍然是內聯的，但可以有高度，邊距，填充和其他任何內容。

來源

2013-09-21 03:30:40

這不是內聯元素;它是塊級元素上的內聯樣式聲明。 –

這很搞笑。 – superiggy

只需修復它@ jedd.ahyoung。對不起，有些小誤解...... –

CSS轉換：爲「高度」風格的內聯樣式之間的動畫屬性

回答

相關問題