如何使用Angular动画复制jQuery slideUp（）/ slideDown（）？

Question

我想基本上通过* ngIf指令向元素添加平滑的动画（类似于jQuery的slideUp / 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

您的动画均已正确设置，只是包含<campaign>元素的div不会隐藏任何溢出。 一旦*ngIf变为true ，则将元素插入DOM中。 <div>动画效果，但是由于它没有隐藏溢出的元素，因此会立即显示。 有两种可能的解决方案：

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