Transition可以过渡display属性吗？

Transition 并非不能过渡 display，揭开陈旧的误解

从何说起？

理解 Transition 如何过渡 display 之前，我们需要弄清楚 Transition 如何作用于元素属性。

CSS 规范将任何可动画的 CSS 属性称为“动画属性”。这些属性都有一个“初始值”和一个“结束值”。动画启动时，浏览器的渲染引擎将动画属性的当前值设置为其“初始值”。随着动画进行，渲染引擎会将该属性的当前值从“初始值”平滑过渡到“结束值”。

对于那些拥有离散值的动画属性，如 display，其“初始值”和“结束值”分别是该属性的两个合法值。比如，display 的“初始值”是 block，而“结束值”是 none。

Transition 如何过渡 display

既然我们了解了 Transition 对动画属性的作用机制，那么理解它如何过渡 display 也就不难了。

使用 Transition 过渡 display 属性时，我们需要做的就是指定动画的持续时间和动画函数。持续时间决定了动画的总时长，而动画函数决定了动画的过渡效果。

例如，以下代码为元素的 display 属性设置一个持续时间为 1 秒的动画，并使用“ease-in-out”动画函数：

element {
  transition: display 1s ease-in-out;
}

给元素添加此样式后，浏览器的渲染引擎会将元素的 display 属性当前值设置为 block（即其“初始值”）。然后，随着动画进行，渲染引擎会逐渐将 display 属性的当前值从 block 过渡到 none（即其“结束值”）。

在这个过程中，元素的 display 属性值会从 block 逐渐变成 none，从而实现元素的隐藏效果。

注意

需要指出的是，Transition 无法改变元素的实际 display 类型。换句话说，即使我们使用 Transition 过渡 display 属性，元素的实际 display 类型仍然是 none。这意味着，即使我们使用 Transition 过渡 display 属性，元素仍然不可见。

不过，我们可以使用其他 CSS 属性来改变元素的实际 display 类型。例如，我们可以使用 visibility 属性来控制元素的可见性。当我们将元素的 visibility 属性设置为 hidden 时，元素就会变得不可见，即使其 display 属性为 block 也是如此。

兼容性

Transition 对 display 属性的过渡支持非常好。所有主流浏览器都支持此特性。

总结

综上所述，Transition 可以过渡 display 属性。但是，需要注意的是，Transition 无法改变元素的实际 display 类型。我们可以使用其他 CSS 属性来改变元素的实际 display 类型，例如使用 visibility 属性。

常见问题解答

1. Transition 对 display 属性的过渡有什么限制？

Transition 可以为 display 属性添加过渡效果，但无法改变元素的实际 display 类型。

2. 如何使用 Transition 隐藏元素？

为 display 属性添加持续时间为 1 秒的 Transition，并使用“ease-in-out”动画函数。然后，将元素的 display 属性设置为 none。

3. 如何使用 Transition 显示元素？

为 display 属性添加持续时间为 1 秒的 Transition，并使用“ease-in-out”动画函数。然后，将元素的 display 属性设置为 block。

4. 为什么 display 属性的 Transition 在某些浏览器中不起作用？

Transition 对 display 属性的支持非常好。如果没有生效，请检查您的浏览器是否是最新的，并确保您正确地使用了 Transition。

5. 是否可以使用 Transition 过渡其他 CSS 属性？

是的，Transition 可以用于过渡任何可动画的 CSS 属性，包括颜色、位置、大小等。