Question

我有一个特别难以实现的动画，我想要实现它的唯一方法是让风格引用我可以在触发动画之前更新的变量。

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

因为我知道有人会建议它，是的，我已经尝试过最大高度的技巧而且它不起作用。问题是该部分可能是200像素高或几千像素高，所以我选择安全的最大高度像10000像素。所以现在例如一个部分的实际高度最终为200px，最大高度设置为10000px，动画时间为500ms。因此，现在当用户点击关闭该部分时，大部分动画似乎都没有发生任何事情，因为它正在执行9800像素的额外空间，而这些空间并未显示。然后在最后几个ms中，最后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是您的打字稿文件中定义的变量。如果您需要进一步的帮助，请告诉我。

Angular 4动画变量样式支持

2 个答案: