如何为对话框添加动画效果？

Question

我只是想给我的对话框窗口添加一些动画效果，所以当用户单击“显示按钮”时，对话框应该使用动画从顶部出现。我尝试在组件元数据上使用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>

- HenryDev

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示例

- Antikhippe

---

基本上，如果您查看以下代码 https://github.com/primefaces/primeng/blob/master/src/app/components/dialog/dialog.ts，您将发现此处提供了p-dialog的开箱即用动画。但我认为OP正在寻找类似于Bootstrap模态框的向下滑动动画。 - Niladri

是的，但是使用[@slide-dialog]="alertstate"，动画将永远不会触发...现在他只需要应用正确的过渡即可。 - Antikhippe

@Antikhippe，有什么想法让它向下滑动吗？ - HenryDev

@HenryDev 请看我的 编辑 部分。 - Antikhippe

@HenryDev 不客气 ;) - Antikhippe