css过渡_without_悬停？

Question

简单问题：

当通过伪选择器（即:hover，:active等）触发动画不合适/可行时，是否可以利用css转换？

我的用例是我希望在表单提交后制作动画。我以为我可以做类似的事情：

.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }

然后使用javascript，我会将shown类添加到我想要动画的元素中。

为什么不使用jQuery或类似的动画？我很高兴你问。在iPhone和其他移动设备上，CSS过渡更加顺畅，这些是我所瞄准的平台。目前我正在用jQuery做动画，但它们并不像它们那样流畅。

---

编辑以阐明我对伪选择器的要求。

Answer 1

一切都应该像你期望的那样工作。 JSFiddle：http://jsfiddle.net/ghayes/zV9sc/12/

 .success_message {
   opacity: 0.0;
   transition: opacity 0.3s linear;
   -webkit-transition: opacity 0.3s linear;
   -moz-transition: opacity 0.3s linear;  
   -o-transition: opacity 0.3s linear;
 }

 .success_message.shown {
   opacity: 1.0;
 }

如果这不能解决您的问题，请提供更多代码示例或浏览器细节。祝你好运！

Answer 2

是的，你可以这样做。每当css属性发生变化时，Css转换都会起作用，即使这是因为类更改了。