角7 fullpage.js和AOS

Question

我的问题是下一个。我通过angular.json使用完整的页面JS，并尝试同时使用AOS库。我想使用褪色和其他效果。在第一页，它工作得很好。如果我将数据-os=“淡出”属性放到第二页上的实际元素中，它将被隐藏。如何解决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();
  }
}

在第一个组件上，标记工作得很好。(在我的第一次“登陆”-page)，但如果我滚动下一个，它不工作。

有人能告诉我问题的原因吗？

谢谢

Answer 1

您可以：

• 使用fullpage.js选项scrollBar:true
• 或者使用fullpage.js回调或状态类来激发动画。我制作了一个关于css动画https://www.youtube.com/watch?v=qiCVPpI9l3M的状态类的视频教程。

另外，如果您还没有使用它，请注意有一个fullpage.js角分量。