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

Question

我正在尝试让我的粘性标头具有过渡效果，因此它不仅易于移动，而且易于释放。

我究竟做错了什么？

基本上，以下代码将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文档的链接。

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

Answer 1

根据规范，过渡应该在grid-template-columns和上进行grid-template-rows。

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

可动画的： 作为长度，百分比或计算的简单列表，但唯一的区别是列表中的长度，百分比或计算分量的值

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

更新

这确实有效，但到目前为止仅在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;



  /* 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>

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