Модальная анимация ng-bootstrap
Класс fade не работает на моде ngb.
Я смотрел на попытку применить свою собственную анимацию к модальному, но модальный шаблон явно вводится в модальный диалог с помощью 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>
Мне нужно применить мою анимацию к диалогу верхнего уровня, иначе это всего лишь кусочки модальной анимации. Если я применяю это к шаблону, это взрывается.
Есть идеи, как бы я оживил весь модал??
3 ответа
Вот простое решение. Просто поместите это в 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)}
}
Вам необходимо добавить класс 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});
Достаточно поговорить, вы можете увидеть пример на:
Вот точная копия анимации FADE IN - OUT со SLIDE DOWN в начальной загрузке 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">×</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 здесь
РЕШЕНИЕ 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">×</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 здесь
Просто используйте ngx-bootstrap, который работает почти так же, как ng-bootstrap, но имеет встроенную модальную анимацию. Смотрите демонстрацию и код здесь:
.fade.modal {
opacity: 1 !important;
}Я не знаю, сработает ли это для вас, но я исправил это, добавив это в основной CSS
К сожалению, анимации в модальностях ng-bootstraps пока не поддерживаются. Кроме того, мне удалось сделать обходной путь с помощью jquery для анимации:
open(content, config) {
this.ngbModal.open(content);
$('.modal-content').animate({ opacity: 1 });
$('.modal-backdrop').animate({ opacity: 0.9 });
}
и в корневом файле styles.css вам также необходимо:
.modal-backdrop.show {
opacity: 0;
transition: 4s;
}
.modal-content {
opacity: 0;
transition: 0.15s;
}