在CSS网格布局中使用CSS过渡 [英] Using CSS transitions in CSS Grid Layout

问题描述

我正在尝试让我的粘性标头具有过渡效果，以使其易于移动，而不仅仅是快速移动.

I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement.

我在做什么错了?

这是我的工作版本:

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

基本上，以下代码将微小的类添加到我的包装器类中，效果很好.

Basically the following code adds the class tiny to my wrapper class, this works fine.

$(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;
}

因此标题确实会按比例缩小，但没有动画，我是否错过了某些内容，或者转换根本不适用于网格?

So the header does shrink as it should but there is no animation, have I missed something or does transitions simply not work with grid?

这是css-grid文档的链接.

Here's a link to the css-grid docs.

https://developer.mozilla.org/zh-CN/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>

推荐答案

根据规范，过渡应该在grid-template-columns和grid-template-rows上起作用.

According to the spec, transitions should work on grid-template-columns and grid-template-rows.

7.2.明确的轨道尺寸:grid-template-rows和 grid-template-columns 属性

7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

可动画设置:作为长度，百分比或计算的简单列表，提供了 唯一的区别是长度，百分比或计算值 列表中的组件

Animatable: as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list

因此，如果我的解释正确，则只要对属性的值进行唯一的更改，而对规则的结构没有任何更改，则过渡应该起作用. 但是他们没有.

So, if my interpretation is correct, as long as the only changes are to the values of the properties, with no changes to the structure of the rule, transitions should work. But they don't.

更新

这确实有效，但到目前为止仅在Firefox中实现.跟随这里 用于其他浏览器更新. https://codepen.io/matuzo/post/animating-css-grid -layout-properties

This does work but is so far only implemented in Firefox. Follow here for other browser updates. 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不起作用.

In the test, the transition works on the height and background color, but not on grid-template-rows or grid-template-columns.

这篇关于在CSS网格布局中使用CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！