如何与ack容器同步制作离子列表动画？

Question

当 showAck 条件为true时，它首先通过移到底部在离子列表项的顶部创建一个空白区域并显示动画。动画结束后，它将移动离子列表项位于顶部。所有这一切都是非常突然的，我需要使离子列表项的动画与ack容器同步移动。

HTML

<div *ngIf="showAck" class="ack-container">

    <span>
      Success! Your file has been created
    </span>

  </div>

  <ion-list>
     // ...........
  </ion-list>

css

@keyframes ack-success-show {

    0% { transform: translate(0, 0) }
    5% { transform: translate(0, 11px) }
    15% { transform: translate(0, 22px) }
    20% { transform: translate(0, 33px) }
    25%, 30%, 35%, 40%, 45%, 50%, 60%, 70% { transform: translate(0, 45px) }
    80%  { transform: translate(0, -11px) }
    85%  { transform: translate(0, -22px) }
    90%  { transform: translate(0, -33px) }
    100%  { transform: translate(0, -44px) }
}
.ack-container{
    position: relative;    
    left: 0;
    top: -44px;
    z-index: 2;
    width: 100%;
    background: $green-ack;
    opacity: 1.0;
    display: flex;
    justify-content: flex-start;
    animation-name: ack-success-show;
    animation-direction: reverse;
    animation-duration: 5s;
    animation-timing-function: linear;
}