Question

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

关于如何使这个动画有效的任何想法？非常感谢提前！

这是我的代码：

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

如何设置Dialog窗口的动画？

1 个答案: