首页 > web前端 > css教程 > CSS 网格布局属性可以设置动画吗?

CSS 网格布局属性可以设置动画吗?

Patricia Arquette
发布: 2024-11-28 14:42:11
原创
572 人浏览过

Can CSS Grid Layout Properties Be Animated?

动画 CSS 网格布局属性

尽管 CSS 网格布局规范指示过渡应应用于 grid-template-columns 和 grid-template -rows,目前在大多数情况下不起作用浏览器。

当前实现:

Firefox 支持动画网格属性,并提供了示例这里:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

警告:

网格结构不能在对行和列尺寸进行动画处理时进行更改。例如,添加或删除行会破坏动画。

测试代码:

考虑以下测试:

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>
  <!-- Additional items -->
</grid-container>
登录后复制

注意:此示例中的测试代码包含在 HTML 注释中,以便正确显示。

以上是CSS 网格布局属性可以设置动画吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板