Angular 7 fullpage.js и AOS - PullRequest
Новая
       7

Angular 7 fullpage.js и AOS

0 голосов
/ 21 февраля 2019

Моя проблема в следующем.Я использую полную страницу JS через angular.json и пытаюсь использовать библиотеку AOS одновременно.Я хотел бы использовать эффекты затухания и другие.На первой странице это работает хорошо.Если я добавлю атрибут data-os = "fade-up" к фактическому элементу на второй странице, он будет скрыт.Как я могу решить эту проблему, чтобы fullpage.js и AOS работали вместе?

app.component.html: 

 app-header></app-header>
<div class="fullpage">
<div mnFullpage>

    <div class="section welcome-section fp-section fp-table">
      <div class="fp-tableCell">
        <app-welcome-component></app-welcome-component>
      </div>
    </div>

    <div class="section welcome-section fp-section fp-table">
      <div class="fp-tableCell">   
            <app-about></app-about>
            <app-technology></app-technology>
      </div>
    </div>

    <div class="section welcome-section fp-section fp-table">
      <div class="fp-tableCell">  
            <app-theory></app-theory>
    </div>
  </div>

  <div class="section welcome-section fp-section fp-table">
        <div class="fp-tableCell">
            <app-needs></app-needs>
        </div>
      </div>

      <div class="section welcome-section fp-section fp-table">
            <div class="fp-tableCell">
                <app-commercial></app-commercial>
            </div>
          </div>

</div>

app.component.ts 

import { Component, OnInit } from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ltd-site';

  ngOnInit(){
    AOS.init({

    })
    AOS.refresh();
  }
}

На первом компоненте тег работает хорошо.(На моей первой странице «лендинга») Но если я прокручиваю следующую, она не работает.

Может кто-нибудь указать мне, что вызывает проблему?

Спасибо

1 Ответ

0 голосов
/ 22 февраля 2019

Вы можете:

  • Использовать опцию fullpage.js scrollBar:true
  • Или использовать обратные вызовы fullpage.js или классы состояний чтобы запустить анимацию.Я сделал видеоурок о классах состояния для анимации CSS https://www.youtube.com/watch?v=qiCVPpI9l3M.

Кроме того, если вы еще не используете его, обратите внимание, что есть Angular компонент для fullpage.js .

...