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

Question

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

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

侧边栏包含两个元素，笔记和聊天。

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

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

我使用 Grid Box 创建了一个 angular POC 示例，以在没有 animation 的情况下实现我所需要的：

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

是否可以通过像示例 POC 中那样将.closed class 添加到我的.container来实现这个带有网格框的 animation？

Answer 1

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

在代码片段中，hover 容器使底部 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>

Answer 2

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

imports: 
[
     BrowserAnimationsModule,
     BrowserModule
]

将动画添加到@component装饰：

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

在html中，将 animation 应用于所需的 div：

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

[更新]

以上是抽象代码。 有关详细代码，我附上了我的 stackblitz 代码： https://stackblitz.com/edit/angular-ivy-zs1x59

在@component's animations中根据需要分别改变高度、宽度