首页 >web前端 >css教程 >为什么 CSS 过渡不适用于所有浏览器中的网格模板属性?

为什么 CSS 过渡不适用于所有浏览器中的网格模板属性?

Patricia Arquette
Patricia Arquette原创
2024-11-16 13:12:03806浏览

Why Don't CSS Transitions Work on Grid Template Properties in All Browsers?

CSS 网格布局中的过渡问题排查

CSS 过渡可以应用于网格属性,从而实现流畅的动画。但是,必须满足某些条件才能使过渡正常运行。

根据 CSS 规范,当仅值发生变化而不改变规则的结构。不过,目前仅 Firefox 支持此功能。其他浏览器可能会在未来的更新中实现它。

测试用例

考虑以下测试用例:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}
<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

在这种情况下,尽管语法上正确,但该转换在 Firefox 以外的浏览器中不起作用。

以上是为什么 CSS 过渡不适用于所有浏览器中的网格模板属性?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn