当部分出现在屏幕上时，AOS 动画不起作用

Posted 2023-05-08

【中文标题】当部分出现在屏幕上时，AOS 动画不起作用

【英文标题】：AOS animation not working when section comes on screen

【发布时间】：2021-03-16 05:35:30

【问题描述】：

我正在使用fullview.js 插件和AOS 制作动画。当我的屏幕出现在视口上时，我必须为文本设置动画。我尝试了下面的代码，动画只在第一部分起作用，但是当我滚动动画时，其他部分不起作用

你能帮我解决这个问题吗？

AOS.init();
$(document).ready(function() 

  $("#fullview").fullView(
    //Navigation
    navbar: "#navbar",
    dots: true,
    dotsPosition: 'right',

    //Scrolling
    easing: 'swing',
    // backToTop: true,

    // Accessibility
    keyboardScrolling: true,

    // Callback
    onViewChange: function(currentView) 
      // console.log(currentView)
    
  )

);

#fullview>div 
  background-color: azure;
  padding: 200px 0;
  /* opacity: 0;
            transition: 0.2s ease-in all; */


#fullview>div.active 
  /* opacity: 1; */


#fullview>div:nth-child(even) 
  background-color: #282c34;
  color: #ffffff;


#fullview h2 
  margin: auto;
  width: 50%;
  text-align: center;


#fullview p 
  text-align: center;
  margin-top: 15px;


#navbar 
  position: fixed;
  width: 100%;
  padding: 20px;


#navbar ul 
  list-style: none;
  text-align: center;


#navbar li 
  display: inline-block;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid gray;
  border-radius: 5px;


#navbar li a 
  text-decoration: none;
  color: black;

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/full-view-scroll/fullview.css?v3">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<div id="navbar">
  <ul>
    <li><a href="#section1">
                    Section 1
                </a>
    </li>
    <li><a href="#section2">
                    Section 2
                </a>
    </li>
    <li><a href="#section3">
                    Section 3
                </a>
    </li>
    <li><a href="#section4">
                    Section 4
                </a>
    </li>
  </ul>
</div>

<div id="fullview">
  <div id="section1">
    <div data-aos="fade-up">
      <h2>jQuery FullView.Js Example</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section2">
    <div data-aos="fade-up">
      <h2>jQueryScript</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section3">
    <div data-aos="fade-up">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section4">
    <div data-aos="fade-up">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/full-view-scroll/fullview.js?v3"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

【参考方案1】：

在文档准备好后尝试 init() AOS：

$(document).ready(function() 
   
   AOS.init();
   
   $("#fullview").fullView(
     //Navigation
     navbar: "#navbar",
     dots: true,
     dotsPosition: 'right',
     //Scrolling
     easing: 'swing',
     // backToTop: true,
     // Accessibility
     keyboardScrolling: true,
     // Callback
     onViewChange: function(currentView) 
        // console.log(currentView)
     
   )

);