离子含量底部效果

Question

我将 Ionic 3 用于我的大学项目。我正在尝试为类似下面的动画找到一些教程，但我找不到任何教程。我想知道如何添加这样的效果。我正在谈论的动画/效果是当您到达列表末尾时显示的动画/效果。例如，Facebook 和 Gmail 应用程序使用这样的动画。有谁知道如何将它添加到 Ionic 3 中？谢谢

视频示例：https://streamable.com/w803y

<div style="width: 100%; height: 0px; position: relative; padding-bottom: 177.778%;"><iframe src="https://streamable.com/s/w803y/tplzas" frameborder="0" width="100%" height="100%" allowfullscreen style="width: 100%; height: 100%; position: absolute;"></iframe></div>

Answer 1

自 Lollipop 版本以来，此滚动效果在 Android 平台上可用。这是 Material Design 版本的一部分。

此效果仅适用于 Android 平台不适用在 iOS 上

查看此新的滚动结束动画（以及 Gmail 的新外观），在它发布时的链接：https://gizmodo.com/the-best-of-android-lollipop-in-8-gifs-1652428837

在此处观看此视频：https://youtu.be/ydFKEMxEywE?t=48

您无法在您的 Ionic 应用中获得此效果，因为这是 Android 的原生效果。

如何在 Android 应用中获得这种效果？

1. 要么开发纯Android App
2. 或使用 React Native 开发应用程序，这将帮助您获得仅在 Android 设备上而非 iOS 设备上的效果

Answer 2

实际上，您可以在应用程序中轻松使用 Animate.css。 首先你需要安装

npm install --save css-animator

然后在您的应用模块中包含“AnimationService, AnimatesDirective”

import { AnimationService, AnimatesDirective } from 'css-animator';

在声明中包含 AnimatesDirective

declarations: [
AnimatesDirective,
...,

和您的提供者中的 AnimationService

providers: [
AnimationService,
{provide: ErrorHandler, useClass: IonicErrorHandler}

您需要在 index.html 文件中链接 Animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

这是一个简单的代码

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ModalController, NavParams } from 'ionic-angular';
import {ContactPage} from '../contact/contact';
import { AnimationService, AnimationBuilder } from 'css-animator';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('myElement') myElem;
  private animator: AnimationBuilder;
  constructor(public navCtrl: NavController, public modalController: ModalController, animationService: AnimationService) {
this.animator = animationService.builder();
  }
  animateElem() {
    this.animator.setType('bounceInUp').show(this.myElem.nativeElement);
  }
}

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="animateElem()">Animate it!</button>
<ion-card #myElement>
  <ion-card-header>My Animation Card</ion-card-header>
  <ion-card-content>So much awesome content and animations. AMAZING!</ion-card-content>
</ion-card>
</ion-content>

here 我创建了一个 stackblitz repo 供参考。您可以在滚动事件中调用函数。