4

在我的应用程序中，我正在为页面上元素的不透明度设置动画，例如：

.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）来捕捉过渡的结束并visibility在那时设置，但我想知道是否有更简单的方法，最好坚持纯 CSS。或者，正如我的问题的标题所暗示的那样，非动画属性就是这样吗？

4

2 回答 2

5

visibility 是一个动画属性，请参阅规范。

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

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

可见性：如果其中一个值是“可见”，则作为离散步骤进行插值，其中 0 和 1 之间的计时函数值映射到“可见”和计时函数的其他值（仅出现在转换或作为 Y 值在 [0, 1] 之外的“cubic-bezier()”函数的结果）映射到更近的端点；如果两个值都不“可见”，则不可插值。

但这就是我认为的意思：

visibility不能在 1 - 0 之间的不透明度动画的范围visible和hidden方式之间平滑动画。它只是在过渡的开始和结束状态之间visible以及hidden在过渡的开始和结束状态之间切换。

Providing the transition is either going to or from visibility, then a transition will occur. If trying to transition between visibility: hidden and visibility: collapse for example, those values are "not interpolable" and the transition would not occur.

So in my example, opacity causes the element to fade out and then at the end of the transition, visibility snaps to hidden.

于 2012-07-23T08:45:07.783 回答
1

As a good alternative to display/visibility toggle, opacity:0 with pointer-events:none could be used.

于 2015-04-15T21:08:16.143 回答