css 动画新魔法

CSS 即将推出两项新功能，它们将使我们在实现动画时更容易地避免使用 JavaScript：

• 为了实现进入/退出动画，在 display: none; 之间进行动画转换。
• 在元素的固有尺寸（如 height: auto;）之间进行动画转换。

传统上，如果要将某个元素以动画形式从屏幕中移入或移出（而不是仅仅在视觉上将其隐藏），JavaScript 必须在等待动画或过渡完成后将该元素从页面中移除。现在不再需要了！

当这些新功能出现在浏览器中时，您就可以像使用其他属性一样，使用关键帧动画对 display: none 制作动画了：

.item {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

真不错

你也可以用 CSS 过渡来做同样的事情，但你需要将新的transition-behavior 属性设置为allow-discrete，这样才能起作用。我可以看到类似 * {transition-behavior: allow-discrete} 的内容将来会成为我重置 CSS 的一部分，以便默认启用这种行为。

但相反的情况呢？您有一个当前未显示的元素，而您想在它出现时将其动画化。同样，我们通常会使用 JavaScript 来处理这种情况，以确保初始样式设置正确，并且元素在动画化之前不会在页面上显示。

现在，我们可以像这样指定起始样式：

.item {
	@starting-style {
    opacity: 0;
	}
	
	opacity: 1;
  transition: opacity 0.5s;
}

优雅而实用。如果你想了解这些新功能的更多信息，我建议你查看 Chrome for Developers 博客上的这篇文章。

CSS 的第二项新功能是可以根据元素的固有尺寸进行动画调整。最常见的使用案例是可折叠区域：我们希望可折叠区域在关闭时高度为 height: 0px ，而在打开时其高度应根据内容自动调整。

由于 CSS 一直以来都不允许动画调整为 height: auto;，因此我们不得不使用 JavaScript 来测量内容的高度，并根据该像素值调整动画。

当该功能在浏览器中出现时，我们就可以这样实现了：

.item { 
  height: 0; 
}

.item.open { 
  height: calc-size(auto);
}

这个神奇的功能来自于 calc-size() 函数，这是一个奇怪的应用程序接口选择–为什么不直接使用现有的 calc() 函数呢？这里是 CSS 工作组对该功能草案的评论，其中解释了原因。

这些功能只是 CSS 不断发展、变得更强大、更具表现力的众多方式中的一小部分。要了解即将推出的其他所有新功能，请观看 Una Kravets 在 Google I/O 上制作的精彩视频。

Una 说，我们正处于网络用户界面的黄金时代，我对此深表赞同。