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转换影响两个类而不是一个

回答

相关问题