时间戳

首页 > 解决方案 > 来自“下方”视口的角度动画幻灯片在反弹时留下间隙

angular - 来自“下方”视口的角度动画幻灯片在反弹时留下间隙

问题描述

我正在研究 SPA（Angular 和 Bootstrap），并试图在 UI 中包含一些动画，以吸引用户注意传入的表单。我已经很好地解决了这个问题，但是有一个我不确定如何解决的小调整。

我的动画本质上是在用户与页面上的某些元素交互时从网页“下方”滑入粘性页脚。需要明确的是，动画正在运行。

我面临的挑战是我已经让滑入式动画“弹跳”了一点，例如比它的最终静止位置更远一点，然后又回来。问题是，当它超出其最终静止位置时，页脚元素的底部超出屏幕的底部边缘，您可以看到它“下方”到它后面的元素。我不希望这种情况发生，只需拉伸背景颜色。

这是我在 Angular 中的动画：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('flyInOut', [
      transition(':enter', [
        animate('300ms ease-in-out', keyframes([
          style({ transform: 'translateY(100%)' }),
          style({ transform: 'translateY(50%)' }),
          style({ transform: 'translateY(25%)' }),
          style({ transform: 'translateY(0)' }),
          // A little bounciness
          style({ transform: 'translateY(-10%)' }),
          style({ transform: 'translateY(0)' }),
        ])),
      ]),
      transition(':leave', [
        animate('250ms ease-in-out', keyframes([
          style({ transform: 'translateY(0)' }),
          style({ transform: 'translateY(25%)' }),
          style({ transform: 'translateY(50%)' }),
          style({ transform: 'translateY(100%)' }),
        ])),
      ])
    ])
  ]
})

我正在制作动画的 HTML 元素：

<footer class="footer shadow-lg fixed-bottom border bg-light" @flyInOut *ngIf="this.selectedResourcesCount > 0 && !this.formSubmitted">
  <div class="container">
    <form [formGroup]="form" class="send-form" (submit)="onSendResources()">
      <!-- form elements, etc.. -->
    </form>
  </div>
</footer>

您可以在此 GIF 示例中看到，其中一张卡片中的文本显示为“反弹”出现在页脚元素上。

动画示例

我试过弄乱一些高度、填充、边距等，但它要么不能达到我的目标，要么会对页脚的内部元素产生负面影响。诚然，在我尝试的同时，我不是 CSS 专家，并且希望可能有一个简单的解决方案。

标签： angulartwitter-bootstrapbootstrap-4angular-animations

解决方案

推荐阅读