Angular CSS Animate ngbPopover в текущем местоположении - PullRequest
Новая
       7

Angular CSS Animate ngbPopover в текущем местоположении

1 голос
/ 12 октября 2019

Мне нужно анимировать всплывающее окно, когда оно появляется, в основном я хочу добавить анимацию отказов.

Проблема в том, что когда анимация начинается, она начинается в точке, которая не является начальной или конечной позициейвсплывающее окно, поэтому я хотел бы сделать анимацию отказов в той же позиции элемента.

Я пытался изменить свойство transform-origin, но у меня не было результата. 

// CSS Code
// ngbPopover
ul >>> .popover {
 border: 2px #3f51b5;
 border-bottom-right-radius: 3em;
 border-bottom-left-radius: 3em;
 box-shadow: 3px -2px 4px #AAA;   
 animation:bounce 2s linear; 
}

@keyframes bounce{
 1%   { transform: scale(1,1);}
 10%  { transform: scale(1.1,.9)}
 30%  { transform: scale(.9,1.1) }
 50%  { transform: scale(1.05,.95)}
 57%  { transform: scale(1,1)}
 64%  { transform: scale(1,1)}
 100% { transform: scale(1,1);}
}

// HTML Code
// Here is where the ngbPopover will shows up
<ul class="list-group">
  <li class="list-group-item"  #itemsRef="ngbPopover" 
   [ngbPopover]="popContent"  popoverTitle="Detalle OT" [ngClass]="{'list- 
   group-item-danger': !ot.ficha}" *ngFor="let ot of ordenesTrabajo; let 
   i = index">          
    OT-{{ot.codigo}}
    Ficha: {{ot.ficha}}
  </li>          
 </ul>

 //ngbPopover Content
 <ng-template #popContent><b>{{infoOT}}</b></ng-template>

Я хотел бы запустить анимацию в той же точке, что и всплывающее окно.

РЕДАКТИРОВАТЬ:

Вот как это работает сейчас:

...