无法显示

Question

我在观看Intersection Observer tutorial时遇到了这个问题。我的是一个div而不是一个图像，因此我不必指定视频中的属性，并且我相信在获得10个控制台日志时几乎一切正确，因为我有10个带有“ box”类的div，被用作JS文件中的变量。如CSS所示，我对动画使用了 opacity 和 transformation 。我欣赏自己做错了什么，以至于看不到滚动动画的发生。

const targets = document.querySelectorAll('.box');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
      console.log('hello World');
      if(entry.isIntersecting) {
        const div = entry.target;

        div.classList.add('fade');

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

targets.forEach(lazyLoad);

:root {
    --primary-color:#425b84;
    --secondary-color:#5b7bb4;
    --max-width:1100px;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font:normal 1rem/1.5 'Arial', sans-serif;
    background:var(--primary-color);
    color:#fff;
    overflow-x:hidden;
    padding-bottom:50px;
}

#main-header {
    background:var(--secondary-color);
    padding:4rem 0;
}

.container {
    max-width:var(--max-width);
    margin:0 auto;
    text-align:center;
}

h1 {
    font-size:2.3rem;
}

#timeline ul {
    background:var(--primary-color);
    padding:50px 0;
}

/* Create Line */
#timeline ul li {
    list-style:none;
    position: relative;
    width:6px;
    margin:0 auto;
    padding-top:50px;
    background:#fff;
}

/* Boxes */
#timeline ul li div {
    position: relative;
    bottom:0;
    width:400px;
    padding:1rem;
    background:var(--secondary-color);
    transition:all 0.5s ease-in-out;
    opacity:0;
}

.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0);
}

/* Right Side */
#timeline ul li:nth-child(odd) div {
    left:40px;
    transform:translateX(1100px);
}

/* Left Side */
#timeline ul li:nth-child(even) div {
    left:-434px;
    transform:translateX(-1100px);
}

/* Dots */
#timeline ul li:after {
    content:'';
    position: absolute;
    left:50%;
    bottom:0;
    width:25px;
    height:25px;
    background:var(--secondary-color);
    transform:translateX(-50%);
    border-radius:50%;
    transition:background 0.5s ease-in-out;
}

/* Arrows Base */
#timeline div:before {
    content:'';
    position: absolute;
    bottom:5px;
    width:0;
    height:0;
    border-style:solid;
}

/* Right Side Arrows */
#timeline ul li:nth-child(odd) div:before {
    left:-15px;
    border-width:8px 16px 8px 0;
    border-color:transparent var(--secondary-color) transparent transparent;
}

/* Left Side Arrows */
#timeline ul li:nth-child(even) div:before {
    right:-15px;
    border-width:8px 0 8px 16px;
    border-color:transparent transparent transparent  var(--secondary-color);
}

@media(max-width:900px){
    #timeline ul li div {
        width:250px;
    }

    #timeline ul li:nth-child(even) div {
        left:-284px;
    }
}

@media(max-width:600px) {
    #timeline ul li {
        margin-left:20px;
    }

    #timeline ul li div {
        width:calc(100vw - 90px);
    }

    #timeline ul li:nth-child(even) div {
        left:40px;
    }

    /* Right Side Arrows */
#timeline ul li:nth-child(even) div:before {
    left:-15px;
    border-width:8px 16px 8px 0;
    border-color:transparent var(--secondary-color) transparent transparent;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/bbb16afe05.js" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="./css/aos.css"> 
    <link rel="stylesheet" href="./css/style.css">
    <title>Knowledge Timeline</title>
</head>
<body>
    <header id="main-header">
        <div class="container">
            <h1><i class="fas fa-brain"></i> Knowledge Resume</h1>
            <h3><div class="fas fa-user"></div> Jun Jung</h3>
        </div>
    </header>

    <section id="timeline">
        <ul>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2007: HTML &amp; CSS</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2012: Python</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box"            
                >
                    <h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
        </ul>
    </section>
    <script src="./js/main.js"></script>
</body>
</html>

Answer 1

您的路口观察员当前正在定位.box元素，这些元素会触发最初的10个控制台日志，因为它们存在于DOM上，但不会滚动触发，因为它们不在屏幕上（视口外）。

此外，如另一个答案中所述，您应该对所有实例使用一个公共观察器。

但是，如果您想为每个实例使用单独的观察者，则可以定位.box元素的父元素，即<li>元素，并在<li>元素滚动到视图中时，您可以像这样使用ParentNode.children属性将类添加到您先前定位的.box元素的子元素中：

const targets = document.querySelectorAll('#timeline li');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
      console.log('hello World');
      if(entry.isIntersecting) {
        const div = entry.target.children[0];

        div.classList.add('fade');

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

targets.forEach(lazyLoad);

此外，您的CSS #timeline ul li:nth-child(odd) div样式属性将覆盖新的.fade属性，因为它的定位更加精确。您将需要新的.fade属性来将.box元素定位为与使用以下初始样式一样精确的目标：

#timeline ul li:nth-child(odd) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}
#timeline ul li:nth-child(even) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}

或者您可以将上述CSS组合如下：

#timeline ul li:nth-child(odd) div.fade, #timeline ul li:nth-child(even) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}

检查并运行以下代码段，或打开此JSFiddle链接以获取上述示例：

const targets = document.querySelectorAll('#timeline li');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
      console.log('hello World');
      if(entry.isIntersecting) {
        const div = entry.target.children[0];

        div.classList.add('fade');

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

targets.forEach(lazyLoad);

:root {
    --primary-color:#425b84;
    --secondary-color:#5b7bb4;
    --max-width:1100px;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font:normal 1rem/1.5 'Arial', sans-serif;
    background:var(--primary-color);
    color:#fff;
    overflow-x:hidden;
    padding-bottom:50px;
}

#main-header {
    background:var(--secondary-color);
    padding:4rem 0;
}

.container {
    max-width:var(--max-width);
    margin:0 auto;
    text-align:center;
}

h1 {
    font-size:2.3rem;
}

#timeline ul {
    background:var(--primary-color);
    padding:50px 0;
}

/* Create Line */
#timeline ul li {
    list-style:none;
    position: relative;
    width:6px;
    margin:0 auto;
    padding-top:50px;
    background:#fff;
}

/* Boxes */
#timeline ul li div {
    position: relative;
    bottom:0;
    width:400px;
    padding:1rem;
    background:var(--secondary-color);
    transition:all 0.5s ease-in-out;
    opacity:0;
}

#timeline ul li:nth-child(odd) div.fade, #timeline ul li:nth-child(even) div.fade {
    opacity:1;
    transition:all 0.5s ease-in-out;
    transform:translateX(0) !important;
}

/* Right Side */
#timeline ul li:nth-child(odd) div {
    left:40px;
    transform:translateX(1100px);
}

/* Left Side */
#timeline ul li:nth-child(even) div {
    left:-434px;
    transform:translateX(-1100px);
}

/* Dots */
#timeline ul li:after {
    content:'';
    position: absolute;
    left:50%;
    bottom:0;
    width:25px;
    height:25px;
    background:var(--secondary-color);
    transform:translateX(-50%);
    border-radius:50%;
    transition:background 0.5s ease-in-out;
}

/* Arrows Base */
#timeline div:before {
    content:'';
    position: absolute;
    bottom:5px;
    width:0;
    height:0;
    border-style:solid;
}

/* Right Side Arrows */
#timeline ul li:nth-child(odd) div:before {
    left:-15px;
    border-width:8px 16px 8px 0;
    border-color:transparent var(--secondary-color) transparent transparent;
}

/* Left Side Arrows */
#timeline ul li:nth-child(even) div:before {

    <header id="main-header">
        <div class="container">
            <h1><i class="fas fa-brain"></i> Knowledge Resume</h1>
            <h3><div class="fas fa-user"></div> Jun Jung</h3>
        </div>
    </header>

    <section id="timeline">
        <ul>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2007: HTML &amp; CSS</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2012: Python</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box"            
                >
                    <h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
                </div>
            </li>
        </ul>
    </section>

Answer 2

无法显示

在此示例中，您给.box元素提供的元素不会是相交，因为它们不在视口中。这是由于这些元素上的transform属性将它们放置在视图之外。删除transform属性将解决此问题。您可以通过在.box元素内添加另一个div来解决此问题，该元素在视图外部转换。这样，可以观察到父（.box）并在视图中将.box的子对象转换到外部，并且只要.box相交就可以将其动画返回。

淡出

由于.fade div的特殊性，.box类无法正常工作。 #timeline ul li div比.fade更具体，因此.fade将始终被#timeline ul li div的id选择器覆盖。要解决此问题，请使用.box { ... }和.box.fade { ... }来降低选择器的特定性，或者将.fade添加到特定的选择器中，如下所示：#timeline ul li div.fade。

单个实例

也请避免为每个元素创建IntersectionObserver的实例。一个观察者可以观察多个元素。仅当callback参数变化时，才能创建多个实例。
对于您来说，所有.box元素都必须以相同的方式处理。

const targets = document.querySelectorAll('.box');

const onObserve = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const div = entry.target;
      div.classList.add('fade');
      observer.unobserve(div);
    }
  });
}

const io = new IntersectionObserver(onObserve);

const observeTargets = targets => targets.forEach(target => {
  io.observe(target);
});

observeTargets(targets);

:root {
  --primary-color: #425b84;
  --secondary-color: #5b7bb4;
  --max-width: 1100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 1rem/1.5 'Arial', sans-serif;
  background: var(--primary-color);
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}

#main-header {
  background: var(--secondary-color);
  padding: 4rem 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 2.3rem;
}

#timeline ul {
  background: var(--primary-color);
  padding: 50px 0;
}


/* Create Line */

#timeline ul li {
  list-style: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}


/* Boxes */

#timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 1rem;
  background: var(--secondary-color);
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

#timeline ul li div.fade {
  opacity: 1;
  transition: all 0.5s ease-in-out;
  transform: translateX(0);
}


/* Right Side */

#timeline ul li:nth-child(odd) div {
  left: 40px;
  /* transform: translateX(1100px); */
}


/* Left Side */

#timeline ul li:nth-child(even) div {
  left: -434px;
  /* transform: translateX(-1100px); */
}


/* Dots */

#timeline ul li:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 25px;
  height: 25px;
  background: var(--secondary-color);
  transform: translateX(-50%);
  border-radius: 50%;
  transition: background 0.5s ease-in-out;
}


/* Arrows Base */

#timeline div:before {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 0;
  height: 0;
  border-style: solid;
}


/* Right Side Arrows */

#timeline ul li:nth-child(odd) div:before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent var(--secondary-color) transparent transparent;
}


/* Left Side Arrows */

#timeline ul li:nth-child(even) div:before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent var(--secondary-color);
}

@media(max-width:900px) {
  #timeline ul li div {
    width: 250px;
  }
  #timeline ul li:nth-child(even) div {
    left: -284px;
  }
}

@media(max-width:600px) {
  #timeline ul li {
    margin-left: 20px;
  }
  #timeline ul li div {
    width: calc(100vw - 90px);
  }
  #timeline ul li:nth-child(even) div {
    left: 40px;
  }
  /* Right Side Arrows */
  #timeline ul li:nth-child(even) div:before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--secondary-color) transparent transparent;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://kit.fontawesome.com/bbb16afe05.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./css/aos.css">
  <link rel="stylesheet" href="./css/style.css">
  <title>Knowledge Timeline</title>
</head>

<body>
  <header id="main-header">
    <div class="container">
      <h1><i class="fas fa-brain"></i> Knowledge Resume</h1>
      <h3>
        <div class="fas fa-user"></div> Jun Jung</h3>
    </div>
  </header>

  <section id="timeline">
    <ul>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2007: HTML &amp; CSS</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2012: Python</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
      <li>
        <div class="box">
          <h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
        </div>
      </li>
    </ul>
  </section>
  <script src="./js/main.js"></script>
</body>

</html>

交叉口观察器（滚动动画）不起作用

2 个答案:

无法显示

淡出

单个实例