CSS过渡_without_悬停？答案

【问题标题】：css transitions _without_ hover?CSS过渡_without_悬停？
【发布时间】：2011-10-08 02:45:12
【问题描述】：

足够简单的问题：

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

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

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

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

为什么不直接使用 jQuery 或类似的动画？我很高兴你问。 CSS 过渡在 iPhone 和其他移动设备上更加流畅，这是我的目标平台。目前我正在使用 jQuery 制作动画，但它们并没有想象中的那么流畅。

编辑以澄清我对伪选择器的要求。

【问题讨论】：

CSS 过渡与伪类/元素选择器有什么关系？
你能澄清一下什么不能通过:hover 或:active 选择吗？据我所知，你可以在很多元素上使用这些伪选择器。
我相信 OP 是在谈论事件，而不是专门针对伪选择器。例如。 “我希望在单击按钮时发生这种情况”

标签： css css-animations

【解决方案1】：

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

【讨论】：

感谢您非常快速准确的回复，非常感谢。

【解决方案2】：

一切都应该如您所愿。 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;
 }

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

【讨论】：

谢谢！我想我第一次尝试时放弃得太快了。感谢 JSFiddle 上的示例。触感极佳。