如何在 ng bootstrap 中为模型的输入/输出制作动画

Question

我无法像在动画中那样制作动画。

我试过了

@keyframes fadeout{
0%{  transform:scale(1);}
50%{ transform:scale(1.1);}
100%{ transform:scale(0);}
}

.fade-out{
 animation: fadeout 2s linear;
}

这是我下面的动画代码：

@keyframes modal-fade {
  from {
    top: -390px;
    opacity: 0;
  }

  to {
    top: -230px;
    opacity: 1;
  }
}

.modal {
  top: -230px;
  animation: ease-in-out .3s modal-fade;

  &.show {
    top: -230px;
  }
    .modal-body {
    &:focus {
      outline: none;
    }
  }
}

我想让我的模型在顶部位置，它在页面的中心，为了让它在顶部，我使用了 top 属性，但是对于负值，我想避免负值。有什么办法吗？

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  top: -230px;
}

Answer 1

您可以使用“ng-bootstrap”动画选项

将此行添加到您的代码中：

 this.modalService.open(content, { size: "sm", animation: true });