堆栈内存溢出
  简体   繁体   English

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

[英]Intersection Observer (Scroll Animation) not working

 原文  2019-12-21 19:41:45  4   2    javascript/ html/ css/ scroll/ intersection-observer

问题描述

I bumped into this problem while watching the Intersection Observer tutorial .我在看Intersection Observer教程时遇到了这个问题。 Mine is a div instead of an image so I did not have to specify an attribute like the one in the video and I believe I almost did everything right as I get 10 console logs because I have 10 divs with a class "box", which were used as a variable in JS file.我的是一个 div 而不是图像，所以我不必指定像视频中那样的属性，我相信我几乎做对了所有事情，因为我得到了 10 个控制台日志，因为我有 10 个带有“box”类的 div，其中被用作 JS 文件中的变量。 I used opacity and transformation for the animation as indicated in CSS.我对动画使用了不透明度和转换，如 CSS 所示。 I appreciate what I am doing wrong that I cannot see the scroll animation happening.我很感激我做错了什么，我看不到滚动动画的发生。 

 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>

2 个解决方案

解决方案1
 2 已采纳  2019-12-21 20:43:22

Your intersection observer is currently targeting the .box elements which trigger the initial 10 console logs because they exist on the DOM but wont trigger on scroll because they're not on the screen (out of viewport).您的交叉点观察者当前的目标是触发初始 10 个控制台日志的.box元素，因为它们存在于 DOM 上，但不会在滚动时触发，因为它们不在屏幕上（在视口外）。

Also, as mentioned in the other answer, you should use a common observer for all your instances.此外，如另一个答案中所述，您应该为所有实例使用一个公共观察者。

However, if you want to use a separate observer for each instance, you can target the .box element's parent ie the <li> element and when the <li> element is scrolled into view, you can just add the class to it's child element which is the .box element you were targeting earlier using the ParentNode.children property like this:然而，如果你想为每个实例使用一个单独的观察者，你可以定位.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);

Also, your css #timeline ul li:nth-child(odd) div style properties is overriding your new .fade properties because it targetting is more precise.此外，您的 css #timeline ul li:nth-child(odd) div样式属性会覆盖您的新.fade属性，因为它的定位更加精确。 You will need the new .fade properties to target the .box element as precise as you did with the initial styles like this:您将需要新的.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;
}

Or you can combined the above css like this:或者你可以像这样组合上面的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;
}

Check and run the following Code Snippet or open this JSFiddle link for a practical example of the above:检查并运行以下代码片段或打开此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>

解决方案2
 1  2019-12-21 20:30:36

Transforming out of view转出视野

In the example you gave the .box elements would not be intersecting because they are out of the viewport.在您给出的示例中， .box元素不会相交，因为它们在视口之外。 This is due to the transform property on these elements which places them outside of the view.这是由于这些元素的transform属性将它们放置在视图之外。 Removing the transform properties would fix it.删除transform属性将修复它。 You can tackle this by adding another div inside the .box element which is transformed outside of the view.您可以通过在.box元素中添加另一个 div 来解决这个问题，该元素在视图之外进行转换。 This way the parent ( .box ) is observed and in the view and the child of .box is transform outside and can be animated back whenever .box is intersecting.这样父（ .box ）被观察到，在视图中， .box的子在.box变换，并且可以在.box相交时.box动画。

Fade褪色

The .fade class is not working because of the specificity on the the .box divs.由于.box div 的特殊性， .fade类.box 。 #timeline ul li div is far more specific than .fade and thus .fade will always be overwritten by the id selector of #timeline ul li div . #timeline ul li div比.fade更具体，因此.fade将始终被#timeline ul li div的 id 选择器覆盖。 To tackle this either make your selectors less specific by using .box { ... } and .box.fade { ... } or add the .fade to the specific selector like so: #timeline ul li div.fade .要解决这个问题，要么使用.box { ... }和.box.fade { ... }使您的选择器不那么具体，或者像这样将.fade添加到特定选择器： #timeline ul li div.fade 。

A single instance单个实例

Also, avoid creating an instance of an IntersectionObserver for each element.此外，避免为每个元素创建IntersectionObserver的实例。 A single observer can observe multiple elements.一个观察者可以观察多个元素。 Multiple instances should only be created if the callback argument varies.仅当callback参数变化时才应创建多个实例。
In your case, all .box elements have to be handled the same.在您的情况下，所有.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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 交叉观察者多重动画 - intersection observer multiple animation 用于在视口中检测溢出滚动容器中的图像的交叉观察器不起作用 - Intersection observer to detect in viewport Images in the overflow scroll container not working 交叉口观察员没有按预期工作 - Intersection observer not working as expected 路口观察员不与兄弟姐妹一起工作 - Intersection Observer not working with siblings 交叉口观察员polyfill不工作Safari - intersection observer polyfill not working Safari 交叉路口观察者阈值不起作用 - Intersection observer thresholds value not working 交叉路口观察器不工作 Wordpress 5.8.1 - Intersection Observer Not Working Wordpress 5.8.1 使用 Intersection Observer 在 Firefox 中修复 CSS 动画 - Bugged CSS animation in Firefox using Intersection Observer Intersection Observer API 是滚动动画的唯一方法吗？ - Is Intersection Observer API the only way to animate on scroll? 交叉口观察者 API 滚动感知导航 - Intersection observer API scroll aware navigation
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM