div 高度上的 Angular 2/4 动画答案

【问题标题】：Angular 2/4 Animation on div heightdiv 高度上的 Angular 2/4 动画
【发布时间】：2017-04-19 13:39:04
【问题描述】：

我会尽量保持简短。出于某种原因，我的动画似乎在宽度/不透明度样式属性上运行良好，但在高度属性上却不起作用......

动画 -

trigger('Grow', [
transition(':enter', [   // :enter is alias to 'void => *'
  style({height:'0'}),
  animate(500, style({height:'*'})) 
]),
transition(':leave', [   // :leave is alias to '* => void'
  animate(500, style({height:0})) 
])
])

将“高度”更改为宽度/不透明度，动画效果很好…… 有谁知道问题出在哪里？在任何地方都找不到相关答案。

我想要实现的一个示例就像 udemy 中的动画一样，单击某个部分后，div 高度会扩展显示所有视频 - https://www.udemy.com/meteor-react/

感谢阅读。

更新 - 仍然不起作用...

也许它与我正在制作动画的内容有关？

<div class="animate" *ngIf="show" [@animate]> 
  <div  *ngFor="let video of section"><a>hi</a></div>
</div>

一旦我单击，就会发生 div.animate 显示（由 ngif 提供）并填充很多行，上面写着“嗨”。我想在 div.animate 节目中制作我指定的动画。

帮助！ ^^

【问题讨论】：

我明白了......好吧，如果是这样的话，您知道 udemy 如何在我附加的示例中制作此动画
执行类似 [@animate]="myAnimationState" 的操作。当您需要它显示时会出现 Idk，但在我的示例中，它会将我的“helpMenuOpen”变量从“out”状态切换到（click）事件的“in”状态。您需要将“myAnimationState”变量控制为您想要的效果，以从“：输入”更改为“：离开”，正如您所命名的那样。例如，也许你想改变路线；所以听路由变化来改变那个变量。
好的，最终我只是取下了 ngIf 并将其设置为隐藏以正确设置动画......这很好，因为该 div 下没有太多内容会导致问题。感谢您的所有帮助:)
动画绝对可以在 ngIf 更改上工作，您只需要设置动画来处理这个问题。将状态设置为 '*' 和 'void' 而不是 'in' 和 'out'

标签： angular animation

【解决方案1】：

trigger() 函数中没有定义任何状态。

trigger 创建一个命名的动画触发器，其中包含 state() 和 transition() 条目的列表，当绑定到触发器的表达式发生更改时要评估这些条目（在下面的示例中，表达式为 [@slideInOut]="helpMenu"）。

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenu: string;

  constructor() { }

  ngOnInit() {
    this.helpMenu = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenu = this.helpMenu === 'out' ? 'in' : 'out';
  }

}

然后像这样在你的视图中使用它：

<div [@slideInOut]="helpMenu">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>

【讨论】：

通过这样做，您可以获得与 Udemy 中相同的动画吗？如果您可以编辑并添加其余代码以说明如何实现它并更改状态，那就太好了！谢谢
@Ben 检查更新的答案，但不，我无权访问 udemy，这只是一个改变高度和宽度的动画示例
我发现当目标高度设置为'auto'时，动画会跳跃，而当height属性设置为'*'时，动画是平滑的。
而不是拥有 2 个transition(...)，您可以只拥有一个同时适用于两者的一个：transition('* => *', animate('400ms ease-in-out'))
这不适用于enter 和leave!!!!

【解决方案2】：

Angular 动画 cat 与 *ngIf 指令完美配合。

现在官方文档中有一个section 描述了如何做到这一点。

您的示例中的问题是模板动画触发器被指定为[@animate]，但在组件的动画声明中，实际触发器是Grow。因此，模板触发器需要指定为[@Grow]。

app.component.ts

    trigger("grow", [ // Note the trigger name
      transition(":enter", [
        // :enter is alias to 'void => *'
        style({ height: "0", overflow: "hidden" }),
        animate(500, style({ height: "*" }))
      ]),
      transition(":leave", [
        // :leave is alias to '* => void'
        animate(500, style({ height: 0, overflow: "hidden" }))
      ])
    ])

app.component.html

<div class="test" *ngIf="show" [@grow]> <!-- Use exact same trigger name here -->
  <div *ngFor="let video of section"><a>hi</a></div>
</div>

工作演示：stackblitz

【讨论】：