Question

我正在尝试并转换到网格行结束更改。有办法吗？我尝试使用以下内容无效。

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

单击时会发生更改。

Answer 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 AND grid-row-end。 HOWEVER 这是您的出发点，请记住这一点。至于.box:hover，那将是技术上的终点。

希望这有帮助！

网格行结束时的css转换

1 个答案: