Question

我想基本上将一个平滑的动画（类似于jQuery的slideUp / slideDown方法）添加到带有* ngIf指令的元素中。到目前为止，我已经尝试过这个：

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，但是这样，即使通过使用动画回调，动画也没有做任何事情，我能够确认它们被触发了。 / p>

Answer 1

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

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

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

1 个答案: