javascript – 如何设置Dialog窗口的动画？

2019年7月28日 141次阅读

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

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>

最佳答案 尝试用[@ slide-dialog] =“display？’active’：’inactive’”替换[@ slide-dialog] =“alertstate”.

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

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

点赞