Question

淡入淡出类似乎不适用于ngb-modal。

我已经看过尝试将自己的动画应用到模态，但模态模板显然是通过ng-bootstrap注入到模态对话中，例如我无法访问模式对话。我只能访问模板：

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header card-header" style="border-radius: 10px;">
    <h4 class="modal-title">Contact Form</h4>
 </div>
    <div class="modal-body"> </div>
...etc
</template>

我需要将我的动画应用到顶级对话，否则只需要模态动画的位。如果我将它应用到模板，它会爆炸。

知道如何为整个模态制作动画吗

Answer 1

这是简单的解决方案。只需将其放入style.css

/* modal animation */
.modal-content{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  75%  {transform: scale(1.1)}
  100% {transform: scale(1)}
}

Answer 2

这是 FADE IN-OUT 动画的精确复制品，带有 SLIDE DOWN bootstrap 4.x

解决方案1：在构造函数中初始化动画

app.component.ts：-

import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
  constructor(private modalService: NgbModal) {
    NgbModalRef.prototype["c"] = NgbModalRef.prototype.close;
    NgbModalRef.prototype.close = function(reason: string) {
      document.querySelector(".modal-backdrop").classList.remove("show");
      document.querySelector(".modal").classList.remove("show");
      setTimeout(() => {
        this["c"](reason);
      }, 500);
    };
    NgbModalRef.prototype["d"] = NgbModalRef.prototype.dismiss;
    NgbModalRef.prototype.dismiss = function(reason: string) {
      document.querySelector(".modal-backdrop").classList.remove("show");
      document.querySelector(".modal").classList.remove("show");
      setTimeout(() => {
        this["d"](reason);
      }, 500);
    };
  }
  open(basic) {
    this.modalService.open(basic);
  }

app.component.html：-

<div class="card">
    <div class="card-header">
        <h4 class="card-title">Basic Modal</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                    <p>Toggle a modal via TypeScript by clicking the button above.</p>
                    <!-- Button trigger modal -->
                    <button type="button" (click)="open(basic)" class="btn btn-outline-primary block btn-lg">
                  Launch Modal
                </button>

                    <!-- Modal -->
                    <ng-template #basic let-modal>
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel1">Basic Modal</h4>
                            <button type="button" class="close" (click)="modal.dismiss('Cross click')" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                        </div>
                        <div class="modal-body" tabindex="0" ngbAutofocus>
                            <h5>Check First Paragraph</h5>
                            <p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
                                Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake
                                cheesecake cookie chocolate cake liquorice.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" (click)="modal.close('Accept click')">Accept</button>
                        </div>
                    </ng-template>
                    <!-- / Modal -->

                </div>
            </div>
        </div>
    </div>
</div>

styles.scss：-

// modal animation
@keyframes modal-fade {
  from {
    top: -50px;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

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

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

stackblitz链接here

解决方案2： 在单个模式调用中激活动画

app.component.ts：-

import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
  constructor(private ngbModal: NgbModal) {}

  open(content: any, config?: any) {
    let modal = this.ngbModal.open(content, config);
    let instance = (modal as any)._windowCmptRef.instance;
    setImmediate(() => {
      instance.windowClass = "custom-show";
    });

    let fx = (modal as any)._removeModalElements.bind(modal);
    (modal as any)._removeModalElements = () => {
      instance.windowClass = "";
      setTimeout(fx, 250);
    };

    return modal;
  }

app.component.html：-

<div class="card">
    <div class="card-header">
        <h4 class="card-title">Basic Modal</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                    <p>Toggle a modal via TypeScript by clicking the button above.</p>
                    <!-- Button trigger modal -->
                    <button type="button" (click)="open(basic)" class="btn btn-outline-primary block btn-lg">
                  Launch Modal
                </button>

                    <!-- Modal -->
                    <ng-template #basic let-modal>
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel1">Basic Modal</h4>
                            <button type="button" class="close" (click)="modal.dismiss('Cross click')" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                        </div>
                        <div class="modal-body" tabindex="0" ngbAutofocus>
                            <h5>Check First Paragraph</h5>
                            <p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
                                Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake
                                cheesecake cookie chocolate cake liquorice.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" (click)="modal.close('Accept click')">Accept</button>
                        </div>
                    </ng-template>
                    <!-- / Modal -->

                </div>
            </div>
        </div>
    </div>
</div>

styles.scss：-

// animation style 
// --------------------------
.modal {
    &.show .modal-dialog {
        transition: 0.25s all;
        // opacity: 0;
        transform: translate(0, -5vh);
    }

    &.custom-show .modal-dialog {
        opacity: 1;
        transform: translate(0, 0);
    }
  .modal-body {
    &:focus {
      outline: none;
    }
  }
}

stackblitz链接here

Answer 3

您需要将动画CSS类添加到全局样式并添加NgbModalOptions。

styles.css：//或您的全局CSS是什么

.modal-holder{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  100% {transform: scale(1)}
}

modal.component.ts

const modalRef = this.modalService.open(NgbdModalContent, {windowClass: 'modal-holder', centered: true});

谈话足够多，您可以在下面看到示例：

StackBlitz

Answer 4

仅在使用NGX的自举其工作原理几乎相同的方式，NG-引导，但内置了模态动画观看演示和代码在这里：

https://valor-software.com/ngx-bootstrap/#/modals

Answer 5

ACTIVE_ENV=source ~/.bash_profile 
default:
    $(ACTIVE_ENV) && compile boot_sect_simple.asm c

我不知道这是否适合您，但我通过将其添加到主CSS中进行了修复

Answer 6

不幸的是，ng-bootstraps模式中的动画还不支持。此外，我设法通过使用jquery动画制作解决方法：

  open(content, config) {
    this.ngbModal.open(content);
    $('.modal-content').animate({ opacity: 1 });
    $('.modal-backdrop').animate({ opacity: 0.9 });

  }

在root styles.css中你还需要：

.modal-backdrop.show {
  opacity: 0;
  transition: 4s;
}

.modal-content {
  opacity: 0;
  transition: 0.15s;
}

ng-bootstrap模态动画

6 个答案: