网格行端的 CSS 过渡答案

【问题标题】：css transition on grid-row-end网格行端的 CSS 过渡
【发布时间】：2017-09-16 08:08:48
【问题描述】：

我正在尝试过渡到网格行端更改。有没有办法做到这一点？我尝试使用以下内容无效。

.box {
     transition: grid-row-end 2s ease;
     transition: height 2s ease;
}

点击时发生变化。

【问题讨论】：

相关：stackoverflow.com/q/43911880/3597276

标签： css transition

【解决方案1】：

不知道你想要这个网格或者你想如何操作它，我不熟悉网格但是：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        .container{
              display: grid;
              grid-template: 100px 1fr / 50px 1fr;
              max-height: 600px;
        }
        .box {
             transition: grid-row-end 2s ease, height 2s ease;
             border: 2px solid black;
             height: 200px;
             width: 100px;
             grid-row-end: 1;
        }
        .box:hover{
            height: 300px;
            grid-row-end: 4;
        }
    </style>
    </head>
    <body>
    <div class = "container">
    <div class="box">
        <p>test</p>
     </div>
     </div>
    </body>

    </html>

container div 具有网格模板，您可以根据自己的喜好进行操作。该框将转换与您的grid-row-end 和height 转换以及您必须操作的width 和height 和grid-row-end 放在一行上。但是这是您的起点，因此请记住这一点。至于.box:hover，从技术上讲，这将是你的终点。

希望这会有所帮助！

【讨论】：

由于网格是动态的，设置大小不起作用。我只想将网格从 2 行增加到 3 行，并让它动画/过渡到新的高度，但看起来网格还没有进入过渡。 :(
再次对网格不好，但我得到了它，所以它有六个条目。从两行三列开始，但移动到三行两列。您必须进行特定调整（例如：修复阻力）jsfiddle.net/35vbcwng