Question

当 showAck 条件为true时，它首先通过移到底部在离子列表项的顶部创建一个空白区域并显示动画。动画结束后，它将移动离子列表项位于顶部。所有这些都是非常突然的，我需要与ack-container同步移动带有动画的离子列表项目。我不想在离子列表上应用任何CSS。

我只想以这种方式将过渡添加到属性位置，即当动画开始缓慢时，过渡的速度也会开始，并将位置更改为相对，以便列表以动画方式向下移动。

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;
}

如何在html5中添加动画过渡？

0 个答案: