Question

我的问题是下一个。我通过angular.json使用整页JS，并尝试同时使用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();
  }
}

在第一个组件上，标签运行良好。（在我的第一个“着陆”页面上），但是如果我滚动下一个，则它不起作用。

有人可以指出导致问题的原因吗？

谢谢

Answer 1

您可以：

使用fullpage.js选项scrollBar:true
或使用fullpage.js callbacks或state classes来触发动画。我制作了一个有关CSS动画https://www.youtube.com/watch?v=qiCVPpI9l3M的状态类的视频教程。

另外，如果您还没有使用它，请注意这里有一个Angular component for fullpage.js。

Angular 7 fullpage.js和AOS

1 个答案: