jquery - 如何使用 Angular 动画复制 jQuery SlideUp()/slideDown()？

Question

我想使用 *ngIf 指令向元素添加一个平滑的动画(类似于 jQuery 的 slipUp/slideDown 方法)。到目前为止，我已经尝试过:

trigger('slideUpDown', [
  transition('void => *', [
    style({height: 0, margin: 0, padding: 0}),
    animate(1500, style({height: '*', margin: '*', padding: '*'}))
  ]),
  transition('* => void', [
    style({height: '*', margin: '*', padding: '*'}),
    animate(1500, style({height: 0, margin: 0, padding: 0}))
  ])
])

模板:

<div>
    <label (click)="showEmailForm = !showEmailForm"><strong>Mail</strong></label>
</div>
<div [@slideUpDown] *ngIf="showEmailForm">
    <campaign-email-channel-form  [channel]="channels?.mail" [isSaving]="isSavingEmailChannel" (save)="onSaveEmailChannel($event)"></campaign-email-channel-form>
</div>

这无法正常工作。所发生的情况是，设置动画的 div 似乎已正确设置动画，但其内容(表单组件)立即完全可见。

我还尝试在组件本身上设置动画和 *ngIf，但这样，动画甚至不会执行任何操作，即使通过使用动画回调我能够确认它们被触发。

Answer 1

你的动画都设置正确，只是div包含<campaign>元素不隐藏任何溢出。一次*ngIf变成true ，该元素被插入到 DOM 中。 <div>动画，但由于它不会 overflow hidden 的元素，因此会立即显示。一些可能的解决方案是:

• 使用<campaign-email-channel-form *ngIf="showEmailForm" [@slideUpDown]>
• 添加overflow: hidden作为包含 div 的样式——至少在它动画时是这样。