Angular 4 动画变量样式支持

Question

我正在尝试实现一个特别困难的动画，我想实现它的唯一方法是让样式引用我可以在触发动画之前更新的变量。

用户可以单击展开包含元素集合的部分（反过来，这些元素可以展开，从而改变动画的高度）。这个集合不是静态的，用户可以对数据使用基本的 CRUD 操作，这意味着在打开部分后，它的高度可以改变。所以这个想法是当该部分有 x 项高度为 y 时，我可以很容易地进行计算以确定集合中项目数量的正确高度，但是我一直无法找到对可变样式的任何支持。我从大约一年前看到有人提到它即将到来，但最近没有。有谁知道 angular 是否已经增加了对此的支持，如果是，我在哪里可以找到文档？

因为我知道有人会建议它，是的，我尝试了 max-height 技巧，但它不起作用。问题是该部分可能是 200 像素高或几千像素高，所以我为最大高度选择了一些安全的东西，比如 10000 像素。所以现在例如一个部分的实际高度最终是 200 像素，最大高度设置为 10000 像素，动画时间为 500 毫秒。因此，现在当用户单击关闭该部分时，动画的大部分似乎没有发生任何事情，因为它正在执行未显示的 9800 像素的额外空间。然后在最后几毫秒最后 200px 开始动画非常快。这并不比让该部分出现/消失而没有任何动画更好，而且实际上由于延迟更糟。

更新 这是我最终解决方案的一个简单示例，感谢下面的答案。 https://plnkr.co/edit/o7bnbiDcHZ3U333txbwU?p=preview

该示例中的几个关键行：

如果您打算在加载时扩展元素，这个很容易在网上找到并且工作正常。

state('1', style({
  height: '*',
  padding: '10px'
})),

但是，如果您需要在加载时折叠元素，您还需要此过渡。

transition('void => *', animate(0))

Answer 1

@Component({
  selector: 'your-selector',
  ...  
  animations: [
    trigger('slideDown', [
        state('0', style({ height: '0px', overflow: 'hidden' })),

        // '*' lets you animate to any height or other numeric property
        state('1', style({ height: '*', overflow: 'hidden'  })), 

        // this gets you to the default "hidden" state
        transition('void => *', [    
            animate(0)
        ]),

        transition('* => *', [
            animate('300ms ease-in-out')
        ])
    ])
  ]

在您的 html 模板上：

<div [@slideDown]="slideDown"> where slideDown is a boolean </div>

您需要在app.module.ts 中导入动画模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports: [
    BrowserModule,
    ...
    BrowserAnimationsModule,

更多信息：https://angular.io/docs/ts/latest/guide/animations.html

plunker：https://plnkr.co/edit/kP14stY51DBUQhMezFmC?p=preview

Answer 2

您可以使用 ngStyle 来实现您正在寻找的内容：

[ngStyle]="{height: noOfElements > 1 ? elemHeight : '40px'}"

其中 noOfElements 和 elemHeight 是在您的打字稿文件中定义的变量。如果您需要进一步的帮助，请告诉我。