javascript - 为什么在我添加该功能时我的时间线没有消失又重新出现？-6ren

javascript - 为什么在我添加该功能时我的时间线没有消失又重新出现？

转载作者：行者123 更新时间：2023-11-28 00:36:32

所以我正在通过 this guide 制作时间表我正在添加交互性，然后是隐藏和显示部分。但我的时间线不会消失，只是停留在那里不动，有谁知道我该如何解决这个问题，实际上可以让它首先消失，然后在你向下滚动页面时让它出现？

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 50px;
    background: black;
  }
   
  .timeline ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
  }

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 15px;
    background: #F45B69;
}
   
.timeline ul li div::before {
    content: '';
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}
   
.timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
}
 
.timeline ul li:nth-child(even) div {
    left: -439px;
}
   
.timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #F45B69;
}

.timeline ul li::after {
    background: #fff;
    transition: background .5s ease-in-out;
}
   
.timeline ul li.in-view::after {
    background: #F45B69;
}

  .timeline ul li:nth-child(odd) div {
    transform: translate3d(200px,0,0);
  }
   
  .timeline ul li:nth-child(even) div {
    transform: translate3d(-200px,0,0);
  }

  .timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
  }

<!DOCTYPE html>
<html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>History of the Computer</title>
    <script src="history.j"></script>*/
</head>
<body>

<script>
    function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  var items = document.querySelectorAll(".timeline li");
 
// code for the isElementInViewport function
 
function callbackFunc() {
  for (var i = 0; i < items.length; i++) {
    if (isElementInViewport(items[i])) {
      items[i].classList.add("in-view");
    }
  }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
    
    </script>
    


	<section class="timeline">
		<ul>
			<li>
				<div>
					<time>1801</time> In France, Joseph Marie Jacquard invents a loom that uses punched wooden cards to automatically weave fabric designs. Early computers would use similar punch cards.
				</div>
			</li>
			<li>
				<div>
					<time>1822</time> English mathematician Charles Babbage conceives of a steam-driven calculating machine that would be able to compute tables of numbers. The project, funded by the English government, is a failure. More than a century later, however, the world's first computer was actually built.
				</div>
			</li>
			<li>
				<div>
					<time>1890</time> Herman Hollerith designs a punch card system to calculate the 1880 census, accomplishing the task in just three years and saving the government $5 million. He establishes a company that would ultimately become IBM.
				</div>
			</li>
			<li>
				<div>
					<time>1936</time> Alan Turing presents the notion of a universal machine, later called the Turing machine, capable of computing anything that is computable. The central concept of the modern computer was based on his ideas.
				</div>
			</li>
			<li>
				<div>
					<time>1937</time> J.V. Atanasoff, a professor of physics and mathematics at Iowa State University, attempts to build the first computer without gears, cams, belts or shafts.
				</div>
			</li>
			<li>
				<div>
					<time>1939</time> Hewlett-Packard is founded by David Packard and Bill Hewlett in a Palo Alto, California, garage, according to the Computer History Museum. 
				</div>
			</li>
			<li>
				<div>
					<time>1941</time>  Atanasoff and his graduate student, Clifford Berry, design a computer that can solve 29 equations simultaneously. This marks the first time a computer is able to store information on its main memory.
				</div>
			</li>
			<li>
				<div>
					<time>1943-1944</time>  Two University of Pennsylvania professors, John Mauchly and J. Presper Eckert, build the Electronic Numerical Integrator and Calculator (ENIAC). Considered the grandfather of digital computers, it fills a 20-foot by 40-foot room and has 18,000 vacuum tubes.
				</div>
			</li>
			<li>
				<div>
					<time>1946</time> Mauchly and Presper leave the University of Pennsylvania and receive funding from the Census Bureau to build the UNIVAC, the first commercial computer for business and government applications.
				</div>
			</li>
			<li>
				<div>
					<time>1947</time> William Shockley, John Bardeen and Walter Brattain of Bell Laboratories invent the transistor. They discovered how to make an electric switch with solid materials and no need for a vacuum. 
				</div>
			</li>
			<li>
				<div>
					<time>1953</time> Grace Hopper develops the first computer language, which eventually becomes known as COBOL. Thomas Johnson Watson Jr., son of IBM CEO Thomas Johnson Watson Sr., conceives the IBM 701 EDPM to help the United Nations keep tabs on Korea during the war.
				</div>
			</li>
		</ul>
	</section>
</body>
</html>

最佳答案

嗯，乍一看，您似乎遗漏了这段代码:

.timeline ul li div {
   visibility: hidden;
   opacity: 0;
   transition: all .5s ease-in-out;
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  var items = document.querySelectorAll(".timeline li");
 
// code for the isElementInViewport function
 
function callbackFunc() {
  for (var i = 0; i < items.length; i++) {
    if (isElementInViewport(items[i])) {
      items[i].classList.add("in-view");
    }
  }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 50px;
    background: black;
  }
   
  .timeline ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
  }

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 15px;
    background: #F45B69;
}
   
.timeline ul li div::before {
    content: '';
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}
   
.timeline ul li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
}
 
.timeline ul li:nth-child(even) div {
    left: -439px;
}
   
.timeline ul li:nth-child(even) div::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #F45B69;
}

.timeline ul li::after {
    background: #fff;
    transition: background .5s ease-in-out;
}
   
.timeline ul li.in-view::after {
    background: #F45B69;
}

.timeline ul li div {
   visibility: hidden;
   opacity: 0;
   transition: all .5s ease-in-out;
}

  .timeline ul li:nth-child(odd) div {
    transform: translate3d(200px,0,0);
  }
   
  .timeline ul li:nth-child(even) div {
    transform: translate3d(-200px,0,0);
  }

  .timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
  }

<section class="timeline">
		<ul>
			<li>
				<div>
					<time>1801</time> In France, Joseph Marie Jacquard invents a loom that uses punched wooden cards to automatically weave fabric designs. Early computers would use similar punch cards.
				</div>
			</li>
			<li>
				<div>
					<time>1822</time> English mathematician Charles Babbage conceives of a steam-driven calculating machine that would be able to compute tables of numbers. The project, funded by the English government, is a failure. More than a century later, however, the world's first computer was actually built.
				</div>
			</li>
			<li>
				<div>
					<time>1890</time> Herman Hollerith designs a punch card system to calculate the 1880 census, accomplishing the task in just three years and saving the government $5 million. He establishes a company that would ultimately become IBM.
				</div>
			</li>
			<li>
				<div>
					<time>1936</time> Alan Turing presents the notion of a universal machine, later called the Turing machine, capable of computing anything that is computable. The central concept of the modern computer was based on his ideas.
				</div>
			</li>
			<li>
				<div>
					<time>1937</time> J.V. Atanasoff, a professor of physics and mathematics at Iowa State University, attempts to build the first computer without gears, cams, belts or shafts.
				</div>
			</li>
			<li>
				<div>
					<time>1939</time> Hewlett-Packard is founded by David Packard and Bill Hewlett in a Palo Alto, California, garage, according to the Computer History Museum. 
				</div>
			</li>
			<li>
				<div>
					<time>1941</time>  Atanasoff and his graduate student, Clifford Berry, design a computer that can solve 29 equations simultaneously. This marks the first time a computer is able to store information on its main memory.
				</div>
			</li>
			<li>
				<div>
					<time>1943-1944</time>  Two University of Pennsylvania professors, John Mauchly and J. Presper Eckert, build the Electronic Numerical Integrator and Calculator (ENIAC). Considered the grandfather of digital computers, it fills a 20-foot by 40-foot room and has 18,000 vacuum tubes.
				</div>
			</li>
			<li>
				<div>
					<time>1946</time> Mauchly and Presper leave the University of Pennsylvania and receive funding from the Census Bureau to build the UNIVAC, the first commercial computer for business and government applications.
				</div>
			</li>
			<li>
				<div>
					<time>1947</time> William Shockley, John Bardeen and Walter Brattain of Bell Laboratories invent the transistor. They discovered how to make an electric switch with solid materials and no need for a vacuum. 
				</div>
			</li>
			<li>
				<div>
					<time>1953</time> Grace Hopper develops the first computer language, which eventually becomes known as COBOL. Thomas Johnson Watson Jr., son of IBM CEO Thomas Johnson Watson Sr., conceives the IBM 701 EDPM to help the United Nations keep tabs on Korea during the war.
				</div>
			</li>
    </ul>
</section>

关于javascript - 为什么在我添加该功能时我的时间线没有消失又重新出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54119054/

文章推荐： php - 如何在网站中包含虚拟键盘(数字键盘)？

文章推荐： javascript - 点击通知时启动 Firefox OS 应用程序

文章推荐： wordpress - 只有一个媒体查询被应用

javascript - 为什么我的新内容没有立即在页面上显示/消失，而是在手动刷新后显示/消失？
我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前，我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况，我必须刷新才能看到内容消失了。
Elixir Phoenix LiveView Echart 消失(消失)
抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像
javascript - 单击按钮时选择框出现/消失
搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失
ios - UILayoutViewController中的滚动时自动布局约束“消失”
我正在尝试使用自动布局使用“浮动”标题构建滚动视图。更确切地说，我正在尝试建立包含几列的日历视图。这些列中的每个列都应具有自己的标题，该标题应浮动在顶部，而该列可以垂直滚动到其下方。如果一切正常，则
jquery - 让具有类别的对象在循环中随机出现/消失
我正在尝试模仿星星背景。星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。 var star="•"; var numStars=100; for(var x=1;x•";
jQuery:单击时菜单出现/消失
我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。我的案例: 我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。我需要什么:
android - OnChildClickListener 消失
我有一个可扩展的 ListView ，当我点击一行时，它会触发 onChildClick 或 onGroupClick，具体取决于我点击的是子项还是组。如果我在 xml 布局文件中添加可点击的内容(
ios - NSMutableData 消失
在我的程序中，我有一个 NSMutableData 变量，用于收集来自 http://www.nhara.org/scored_races-2013.htm 的信息。 .大约第三次从网站获取信息后，当
android - Genymotion 消失
我一直在完美地使用 Genymotion，但是从最近几天开始我的 Genymotion 并打开它的 GPS 开始，我的 Genymotion 突然消失了。但是我的 eclipse 显示 Genymot
添加文档类型时 CSS 消失
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - 添加到购物车按钮在悬停时立即出现/消失
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
c++ - vector 消失
所以我的 Item::return_all() 有问题，因为我在 main.cpp 中调用它。早些时候我在 read_file() 和 for (auto data : example_item) 中
ios - UITableViewCells 消失
所有 UITableCells 在 UITableView 中滚动和触摸时消失。一切都以编程方式完成，我使用标准的 UITableViewCell 类。我在某处读到包含我的单元格数据的数组可能被清空
ios - UICollectionView 消失
我对 Swift 还很陌生。我的问题是我的 UICollectionView 正在消失。在 Xcode 中，它显示一切就绪，但当我在模拟器或设备上启动时，它消失了，只剩下导航栏和标签栏。有谁知道是什
javascript - 根据单选按钮的状态变化使子内容出现/消失
这是 this one的续题。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它
javascript - Canvas 消失
我用 JS 写了一个简单的脚本。当我将它放入 html 文档(在 body 标签的底部)时，它工作正常。当我尝试将它放入外部文档并链接它时，脚本运行但 canvas 元素消失(刚刚检查:当我将脚本放在
jquery - 滚动页面时使元素出现/消失
我正在尝试创建一个带有固定元素的滚动页面，当用户向下滚动页面时，该元素“始终”可见。例如，带有道路背景的汽车图像。因此，当用户向下滚动页面时，汽车看起来就像在路上行驶。虽然汽车出现在道路的顶部，但它必
javascript - 使文本在单击按钮时出现/消失
这个问题在这里已经有了答案: How can I change CSS display none or block property using jQuery? (15 个答案) 关闭 4 年前。
android - 如何避免旧的小部件在主要代码返工期间失败/消失？
我在市场上有一个支持小部件的应用程序。我对应用程序进行了一些重大更改，重新设计了很多内部结构，替换/重命名 Activity 等。其他更改包括从不同的共享首选项键获取小部件配置数据，尽管我已经编写了转
java - fragment 消失
我有一个 fragment alertsfragment.java，它有一个 GridView 布局，当我打开它时，它工作正常，但是当我在其他选项卡之间滑动时，它就消失了。为了解释更多，我有一个 Ac

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么在我添加该功能时我的时间线没有消失又重新出现？