Question

在我的应用程序中，我用以下内容为页面上元素的不透明度设置动画：

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

（当然是特定于供应商的版本）。然后

.s.hidden {
    opacity: 0;
}

因此动画在分配hidden类时开始。问题是，仍然在不透明度零的元素上检测到鼠标事件，这是我不想要的，所以我需要将visibility设置为hidden或display设置为none转换完成后之后我希望能够做到这样的事情：

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

然后

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

使用CSS过渡机制轻松完成这项工作。据我所知，这不起作用，因为visibility是一个不可动画的属性。但是其他转换框架，例如d3 做处理不可动画的属性，通过在转换开始时或结束时简单地设置值，显而易见。

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

Answer 1

visibility 是一个可动画的属性，see the spec。

这意味着您的.hidden课程将按照您的描述运作。在这里演示：http://jsfiddle.net/ianlunn/xef3s/

编辑：规范不是很清楚：

可见性：如果其中一个值为“可见”，则插值为a 离散步骤，其中定时功能的值在0和1之间映射 '可见'和定时功能的其他值（仅发生在过渡的开始/结束或'cubic-bezier（）'的结果 Y值超出[0,1]的函数）映射到更近的端点; 如果两个值都不是'可见'，那么就不是可插值的。

但我相信这意味着：

visibility不能在{0}}和visible范围之间以不透明度在1到0之间设置动画的方式进行平滑动画制作。它只是在hidden和{之间切换{1}}在过渡的开始和结束状态。

提供转换要么来自visible，要么来自hidden，然后将发生转换。例如，如果尝试在visibility和visibility: hidden之间进行转换，则这些值“不可插入”，并且不会发生转换。

因此，在我的示例中，visibility: collapse会导致元素淡出，然后在转换结束时，opacity会捕捉到visibility。

Answer 2

作为展示/展示次数切换的一个很好的替代方案，opacity:0可以使用pointer-events:none。