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

Posted 2023-03-06

【中文标题】如何使用角度 BrowserAnimationsModule 为网格框更改设置动画？

【英文标题】：How can I animate grid box change with angular BrowserAnimationsModule?

【发布时间】：2021-04-13 00:44:13

【问题描述】：

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

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

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

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

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

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

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

是否可以像示例 POC 中那样通过将 .closed 类添加到我的 .container 来使用网格框实现此动画？

【参考方案1】：

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

在sn-p中，将容器悬停，使底部的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>
 

【参考方案2】：

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

imports: 
[
     BrowserAnimationsModule,
     BrowserModule
]

将动画添加到 @component 装饰：

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

在html中，将动画应用到所需的div：

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

[更新]

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

根据@component's animations的要求分别改变高、宽