CSS轉換影響兩個類而不是一個

我已經構建了一個顯示某人的報價的HTML頁面。我想創建一個效果，其中作者名稱首先淡入，然後在引號後淡入。CSS轉換影響兩個類而不是一個

我已經實現了我的目標，但我遇到了問題。每當我在quote元素上設置transition-delay時，作者元素也會延遲。這使得作者在T + 1中消失，在T + 2中消失。實際上，這不是T + 1和T + 2，而是更多。

這裏是再現我的問題代碼：Plunker

當你點擊「切換顯示」按鈕，然後出現報價。您可以注意到，該文本在幾秒鐘後消失。但是，如果您從CSS中刪除.quote-text，則會注意到文本幾乎立即消失。

我的問題是，爲什麼transition-delay設置類.quote-text影響設置在類.quote-author上的轉換？我怎樣才能消除這種情感？

謝謝您的時間

來源

2014-09-06 kazy

你可以簡單地告訴我，你究竟想在步驟做了，謝謝。 – Enumy 2014-09-06 02:04:42

是啊請多解釋一下，難以理解你的問題 – Mindless 2014-09-06 02:09:32

謝謝你的時間先生們。我試圖創建一個效果，其中作者節點在T + 0s中淡出，然後在T + 1s中引用節點。目前，我在開始時收到巨大的延遲。用我的代碼，它看起來更像是作者的T + 4和報價的T + 5。 – kazy 2014-09-06 02:11:39

OK，我不想回答這個問題，因爲我只有在AngularJS如何工作非常基本的想法。但我嘗試了一些可能有所幫助的東西。缺點是我刪除了ng-animate並添加了ng-class，這不符合你的問題。但我相信你可以用ng-animate來代替它，再次，這只是爲了幫助，並可能給你一些想法。

入住這Plunker

我只是改變CSS和HTML中的這兩條線：

<h2 class="quote-author transition" ng-class="{'show-me': show}">Bill Nye</h2> 
<span class="quote-text transition" ng-class="{'show-me': show}">&ldquo;Everyone you ever meet knows something you don’t&rdquo;</span>

來源

2014-09-06 03:36:03 Mindless

您的回答已幫助解決我的問題，非常感謝！ – kazy 2014-09-09 13:33:41

CSS轉換影響兩個類而不是一個

回答

相關問題