在 CSS 网格布局中使用 CSS 过渡

Question

我正在尝试让我的粘性标题具有过渡效果，因此它可以缓和而不仅仅是快速移动。

我究竟做错了什么？

这是我的工作版本：

http://codepen.io/juanmata/pen/RVMbmr

基本上，下面的代码将类 tiny 添加到我的包装类中，这很好。

 $(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

这是CSS部分：

 .wrapper {
    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.tiny {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

所以标题确实缩小了，但没有动画，我错过了什么还是过渡根本不适用于网格？

这是 css-grid 文档的链接。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

 $(window).on('load', function() {
  $(window).on("scroll touchmove", function() {
    $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
  });
});

 * {
	margin:0;
	padding:0;
}

.wrapper {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
	grid-template-areas:
		"head head head head"
		"main main main main"
		"leader leader leader leader"
		"foot foot foot foot";
	background-color: #fff;
	color: #444;
}
.tiny {
	grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
.box {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	font-size: 150%;
}
.box .box {
	background-color: lightcoral;
}

.head {
	grid-area: head;
	background-color: #999;
	z-index: 2;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 20% 1fr;
	-o-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	position: sticky;
	top: 0;
}

.logo{
        height: inherit;
        grid-column: 1;
        grid-row: 1;
        background-color:red;
        position: relative;
        overflow: hidden;
    }
.logo img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        max-width: 100%;
        height: auto;
    }
.main {
	grid-area: main;
	/* CSS Grid */
	z-index: 1;
	grid-column: head-start / head-end;
	grid-row: head-start / leader-start;
	background-color: red;
}
.leader {
	grid-area: leader;
	z-index:1;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: repeat(4, 1fr  );
}
.foot {
	grid-area: foot;
	z-index:1;
}

 <div class="wrapper">
  <div class="box head">
    <div class="box logo">
      <a href="#"><img src="https://unsplash.it/200/300/?random" /></a>
    </div>
    <div class="box nav">nav</div>
  </div>
  <div class="box main">main</div>
  <div class="box leader">
    <div class="box leader-1">1</div>
    <div class="box leader-2">2</div>
    <div class="box leader-3">3</div>
    <div class="box leader-4">4</div>
  </div>
  <div class="box foot">foot</div>
</div>

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据规范，转换应该适用于 grid-template-columns 和 grid-template-rows 。

7.2.显式轨道大小： grid-template-rows 和 grid-template-columns 属性

Animatable： 作为长度、百分比或计算的简单列表，只要列表中的长度、百分比或计算组件的值不同

所以，如果我的解释是正确的，只要唯一的变化是属性的值，而不改变规则的结构，转换就应该起作用。 _但他们没有_。

---

更新

这确实有效，但到目前为止只在 Firefox 中实现。在此处关注其他浏览器更新。 https://codepen.io/matuzo/post/animating-css-grid-layout-properties

〜 @bcbrian 评论中的贡献

---

这是我创建的一个测试：

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

  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

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>

jsFiddle 演示

在测试中，过渡适用于高度和背景颜色，但不适用于 grid-template-rows 或 grid-template-columns 。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

作为解决方法，您可以使用网格项的大小来代替 grid-template-columns 或 grid-template-rows 。

你可以这样做：

 grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  background-color: black;
  height: 230px;
  transition: 2s;

  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  background-color: red;
  height: 130px;
}

grid-item {
  height: 100px;
  transition: height 2s;
  background-color: lightgreen;
}

grid-container:hover .first-row {
  height: 25px;
}

grid-container:hover .last-row {
  height: 75px;
}

 <grid-container>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
</grid-container>

这是另一个 2x2 示例： https ://codepen.io/erik127/pen/OvodQR

这是一个更广泛的示例，您可以在其中添加更多列或行： https ://codepen.io/erik127/pen/rdZbxL

不幸的是，它有很多 javascript，如果 grid-template-columns 和 grid-template-rows 可以动画化就好了。

另一种可能在某些用例中起作用的替代方法（如果您的网格项目不跨越多行）是将 flexbox 与网格一起使用。

原文由 Erik 发布，翻译遵循 CC BY-SA 3.0 许可协议