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

为了描述我的问题，我将从根开始解释我正在尝试做什么，以及为什么我决定使用网格框，让我们从两个线框开始：

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

侧边栏包含两个元素，notes和chat

Notes&chat元素可以是小尺寸的，但一旦它是小尺寸的，左主体容器的第二部分就会变宽，并占据边栏在其底部空间的位置，如下面的示例所示：

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

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

---

通过向我的

.container

中添加

.closed

类（如示例POC中的

.container

），是否可以使用grid box实现此动画？

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

在代码段中，将容器悬停以使底部div展开

诀窍是使用一个3列的栅格，以及一个可以增长/收缩的辅助元素：

在生产中，技巧元素的高度为0，并且不可见

.container{
显示：网格；
边框：实心1px红色；
网格模板列：1fr自动；
网格模板行：100px 100px 10px；
过渡：所有3s；
宽度：500px；
}
#对{
背景颜色：黄色；
宽度：200px；
格构柱：2/2跨；
}
#底部{
背景颜色：浅绿色；
格构柱：跨度2；
}
#诡计{
背景色：番茄；
网格柱：2/3；
宽度：0px；
过渡：宽度3s；
}
.container:悬停#技巧{
宽度：200px；
}

L
R
B
T

我们的想法是使用angular提供的动画。因此，您需要在app.module.ts中添加以下内容：

imports: 
[
     BrowserAnimationsModule,
     BrowserModule
]

将动画添加到该

@组件

中：

animations: [
   trigger('<animationName>' [<definitions>])
]    

[更新]

以上是抽象代码。关于详细代码，我附上我的stackblitz代码：

根据组件动画中的要求分别更改高度和宽度

<div [<@animationName>] = '<state-definitions-name>'></div>