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

Question

为了描述我的问题，我将从根源开始解释我正在尝试做什么，以及为什么我决定为此使用 Grid Box，让我们从两个线框开始:
我的布局是由两个容器组成的； body 和侧边栏。不要认为这是整个网站，这只是一个组件。
侧边栏包含两个元素，笔记和聊天。

笔记和聊天元素可以是小尺寸的，但是一旦小尺寸，左侧正文容器的第二部分将变宽并占据侧边栏在其底部空间的位置，如下例所示:

因此，经过一番研究后，我找不到任何其他解决方案，除了需要变宽的第二数据部分有 2 个不同的组件，或者只使用网格框，但是，我必须为侧栏和第二部分设置动画宽度变化的数据。
我用 Grid Box 创建了一个 Angular POC 示例，可以在没有动画的情况下实现我所需要的:
https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html
是否可以通过添加 .closed 来使用网格框实现此动画？给我上课.container就像在示例 POC 中一样？

Answer 1

有一个纯 CSS 解决方案可以帮助您。
在代码段中，将容器悬停以使底部 div 展开。
诀窍是使用一个 3 列网格和一个增长/缩小的辅助元素:
在 production 中，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>