使用 CSS3 过渡对不可设置动画的属性进行动画处理

在我的应用程序中，我使用以下内容对页面上元素的不透明度进行动画处理：

.s {
    transition-property: opacity;
    transition-duration: 250ms;
}

（当然，有特定于供应商的版本）。进而

.s.hidden {
    opacity: 0;
}

所以动画开始时hidden班级已分配。问题是，在不透明度为零的元素上仍然检测到鼠标事件，这是我不想要的，所以我需要设置visibility to hidden or display to none after过渡已完成。我希望能够做这样的事情：

.s {
    transition-property: opacity, visibility;
    transition-duration: 250ms;
    transition-delay:    0, 250ms;
}

and then

.s.hidden {
    opacity: 0;
    visibility: hidden;
}

使用 CSS 转换机制轻松完成此操作。据我所知，这是行不通的，因为visibility是一个不可动画的属性。但其他过渡框架如 d3do处理不可动画的属性，以明显的方式通过简单地在过渡开始或结束时设置值来处理。

我能想到的最好的办法就是使用transitionend事件（及其特定于浏览器的变体，例如oTransitionEnd) 捕获转换的结束并设置visibility那时，但我想知道是否有更简单的方法，最好是纯粹使用 CSS。或者，正如我的问题标题所暗示的那样，不可动画的属性就是这样吗？

visibility is可动画的属性，请参阅规格.

这意味着你的.hidden课程将按照您所描述的方式进行。演示在这里：http://jsfiddle.net/ianlunn/xef3s/

编辑：规范并不完全清楚：

可见性：如果其中一个值是“可见”，则插值为 离散步骤，其中时序函数的值在 0 和 1 之间映射 到“可见”和计时函数的其他值（仅发生 在过渡的开始/结束时或作为“cubic-bezier()”的结果 Y 值在 [0, 1]) 之外的函数映射到更近的端点； 如果两个值都不“可见”，则不可插值。

但这就是我认为的意思：

visibility不能在一系列之间平滑地进行动画处理visible and hidden不透明度在 1 - 0 之间变化。它只是在visible and hidden在转换的开始和结束状态。

假设转换是去往或来自visibility，那么就会发生转变。如果尝试在之间转换visibility: hidden and visibility: collapse例如，这些值是“不可插值的”并且不会发生转换。

所以在我的例子中，opacity导致元素淡出，然后在过渡结束时，visibility捕捉到hidden.