如何使用 angular BrowserAnimationsModule 为网格框更改设置动画？

Question

为了描述我的问题，我将从根源开始解释我想要做什么，以及为什么我决定为此使用 Grid Box，让我们从两个线框开始：

我的布局是由两个容器组成的；身体和侧边栏。不要认为这是整个网站，这只是一个组件。

侧边栏包含两个元素，便笺和聊天。

笔记和聊天元素可以是微型的，但是一旦它是微型的，左侧主体容器的第二部分将变宽并取代侧边栏过去在其底部空间占据的位置，如下例所示：

因此，经过一番研究后，除了为需要变宽的第二个数据部分提供 2 个不同的组件或仅使用网格框之外，我找不到任何其他解决方案，但是，我必须为侧栏和第二部分设置动画具有宽度变化的过渡的数据。

我使用 Grid Box 创建了一个有角度的 POC 示例，以实现我在没有动画的情况下所需的功能：

https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html

是否可以通过在示例 POC中将.closed类添加到 my .containerlike来使用网格框实现此动画？

Answer 1

有一个仅 CSS 的解决方案可以帮助您。

在代码片段中，将鼠标悬停在容器上以使底部 div 展开。

诀窍是使用 3 列网格和一个增长/收缩的辅助元素：

在生产环境中，trick元素的高度为 0，并且是不可见的。

.container {
    display: grid;
    border: solid 1px red;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 100px 100px 10px;
    transition: all 3s;
    width: 500px;
}


#right {
    background-color: yellow;
    width: 200px;
    grid-column: 2 / span 2;
}

#bottom {
    background-color: lightgreen;
    grid-column: span 2;
}

#trick {
    background-color: tomato;
    grid-column: 2 / 3;
    width: 0px;
    transition: width 3s;
}

.container:hover #trick {
    width: 200px;
}

<div class="container">
    <div id="left">L</div>
    <div id="right">R</div>
    <div id="bottom">B</div>
    <div id="trick">T</div>
</div>