將CSS動畫應用到元素後，CSS過渡會造成阻塞

我正在構建一個AngularJS應用程序，通過過濾不透明度來顯示和隱藏元素。該元素也通過應用CSS關鍵幀動畫進行旋轉。我遇到的問題是過渡或動畫口吃。將CSS動畫應用到元素後，CSS過渡會造成阻塞

當元素的不透明度爲1並且轉換淡出爲0時，元素看起來會返回幾幀。這在GIF中表現得更好。您可以看到它在不透明度更改之前跳回。

這是我的CSS。

.square { 
    width: 100px; 
    height: 100px; 
    margin: 50px; 
    background: black; 
} 

.appear.ng-hide-add { 
    -webkit-transition: opacity 300ms linear; 
    opacity: 1; 
} 

.appear.ng-hide-add.ng-hide-add-active { 
    opacity: 0; 
} 

.appear.ng-hide-remove { 
    -webkit-transition: opacity 300ms linear; 
    opacity: 0; 
} 

.appear.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
} 

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 

    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.rotate { 
    -webkit-animation: rotate 1.5s infinite linear; 
}

這是我的HTML。

<div ng-app="app" ng-init="show = true"> 
    <p>Toggle the opacity of the square. Sometimes the rotation is interrupted when the opacity transitions from 1 to 0.</p> 
    <button ng-click="show =!show">Toggle</button> 
    <div class="square appear rotate" ng-show="show"></div> 
</div>

您可以在此codepen整個事情玩。希望有人能指引我正確的方向。

來源

2014-06-29 Tate Johnson

我試過（我敢肯定你也是）在另一個元素中包裝廣場並隱藏/顯示包裝，但它似乎沒有幫助：http://codepen.io/anon/pen/DctGj –

是的，那也不適合我。結束了你的回答。 http://stackoverflow.com/a/24474564/106997 –

另外還有一個解決辦法，只是爲了好玩。稍微比我建議的第一個醜陋。更改框背景顏色不透明度：http://codepen.io/anon/pen/DpuEh

HTML：

<div ng-app="app" ng-init="show = true"> 
    <button ng-click="show = !show">Toggle</button> 
    <div class="square appear rotate" ng-class="{'hidden': !show}"></div> 
</div>

CSS：

.square { 
    width: 100px; 
    height: 100px; 
    margin: 50px; 
    -webkit-transition: background 300ms linear; 
    background: black; 
} 

.square.hidden { 
    background: rgba(0, 0, 0, 0); 
}

我使用rgba設置背景透明度。只需將背景設置爲white也可以用於這種簡單的情況。

來源

2014-06-29 13:30:30

謝謝Henrik。將此更改爲接受的問題答案，因爲這是一個100％的CSS解決方案。如果你可以利用jQuery，你可能要考慮包裝'.animate'。第一次更順暢，之後完全平穩。請參閱https://gist.github.com/tatey/3f1933d2d6d8b4dbe801 –

這顯然是一個WebKit錯誤。這顯然不是CSS應該如何表現的行爲，並且如果您刪除了供應商前綴，它在Firefox中的行爲將與預期一致。您會注意到，當應用其他動畫/轉換時，動畫會重置。這類似於最近修復的一個已知錯誤，其中在不同時間應用多個CSS轉換會導致佈局閃爍。我建議向WebKit團隊報告錯誤，以便修復它。

來源

2014-06-29 03:55:30

這並沒有真正回答這個問題。如果您有不同的問題，可以通過單擊[提問]（http://stackoverflow.com/questions/ask）來提問。您也可以[添加賞金]（http://stackoverflow.com/help/privileges/set-bounties）來引起對此問題的更多關注。 – ccjmne

@ccjmne這不是一個修復不，但我試圖指出他在正確的方向，他要求。這顯然是一個瀏覽器錯誤，應該向WebKit團隊報告。 –

我不是批評他的問題或要求澄清，我告訴他他沒有做錯任何事，而且這顯然是一個錯誤，類似於過去已知的錯誤，應該報告。如果不清楚，我已經澄清了我的答案。 –

我會考慮在transform上使用translate3D來強制硬件加速。

-webkit-transform: translate3d(0,0,0);

這使用硬件加速（GPU）進行CSS轉換。

來源

2014-06-29 04:01:23 Rufus

感謝您的建議，但它沒有奏效。 –

醜陋的解決辦法，可能會或可能不適合，根據您的情況：代替隱藏要素（shows the bug）或容器（also shows the bug），你可以在它上面的一個背景色元素褪色。

HTML：

<div ng-app="app" ng-init="show = false"> 
    <button ng-click="show =!show">Toggle</button> 
    <div class="appear" ng-show="show"></div> 
    <div class="square rotate"></div> 
</div>

CSS：

.appear { 
    background: white; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    z-index: 2; 
}

很明顯，你可能需要更先進的CSS的一個更復雜的佈局，但希望你的想法。

CodePen：http://codepen.io/anon/pen/IwBHj

來源

2014-06-29 08:55:47

醜，但天才。幸運的是，它現在包含在一個模板中。如果我需要重用它，我會考慮將其包裝在指令中。謝謝！ –

將CSS動畫應用到元素後，CSS過渡會造成阻塞

回答

相關問題