时间戳

首页 > 解决方案 > Angular CSS Animate ngbPopover 在当前位置

css - Angular CSS Animate ngbPopover 在当前位置

问题描述

我需要在弹出框出现时对其进行动画处理，基本上我想添加一个反弹动画。

问题是当动画开始时它开始于一个不是弹出框的初始或最终位置的点，所以我想让反弹动画在元素的相同位置完成。

我试图修改 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>

我想在弹出框出现的同一点开始动画。

编辑：

这就是它现在的工作方式：

标签： cssangularcss-animations

解决方案

推荐阅读