Эффект нижнего ионного содержимого

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

Этот эффект прокрутки доступен на платформе Android начиная с версии Lollipop .Это было частью Material Design release.

Этот эффект доступен только на платформе Android NOT на 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
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}

Вам нужно связать Animate.css в вашем файле index.html

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

здесь Я создал репозиторий Stabblitz для ссылки.Вы можете вызвать функцию в событии прокрутки.