javascript - 如何为对话框窗口设置动画？

Question

我只是想在我的对话框窗口中添加一些动画，因此当用户单击显示按钮 时，对话框应该使用动画从顶部出现。我尝试在组件元数据上使用动画属性，但它似乎不起作用。我想要的一个简单示例是:

Example Animation

关于如何让这个动画工作的任何想法？非常感谢!

这是我的代码:

PLUNKER

app.component.ts

animations: [
trigger('slide-dialog', [
  state('inactive', style({
    transform: 'translate3d(10%, 0%, 0)'
  })),
  state('active', style({
    transform: 'translate3d(30%,20,0)'
  })),
  transition('active => inactive', animate('400ms ease'))
])

app.template.html

<p-dialog [@slide-dialog]="alertstate" header="Title" [(visible)]="display" width = '450' height = '200'
      [positionLeft]='positionLeft'
      [positionTop]='positionTop'>
      Content
</p-dialog>

Answer 1

尝试将 [@slide-dialog]="alertstate" 替换为 [@slide-dialog]="display ? 'active' : 'inactive'"。

此外，如果您希望在模态出现时应用动画，请替换

transition('active => inactive', animate('400ms ease'))

由

transition('inactive => active', animate('400ms ease'))

---

编辑

对于向下滑动过渡，将此添加到您的 CSS 中:

.ui-dialog {
  top: inherit !important;
}

你的状态应该是这样的:

        state('inactive', style({
            position: 'absolute',
            top: '0px'
        })),
        state('active', style({
            position: 'absolute',
            top: '150px'
        })),

查看工作 Plunker