离子内容底部效应

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

  

此效果仅适用于iOS平台上的 NOT

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

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

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

  

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

1. 开发纯Android应用
2. 或者使用 React Native 开发应用，这将有助于您只在Android设备上获得效果

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我为refrence创建了一个stackblitz repo。你可以在滚动事件中调用函数。