Javascript 当元素出现在屏幕上时，如何启动动画？

HTML元素一出现在屏幕上就如何设置动画

---

我在堆栈溢出上找到了一个例子，当你向下滚动足够远时，信息元素就会滑入页面。这背后的诀窍是什么？

您需要使用JavaScript检测视口的位置，并在视口可见时激活它

您可以使用JavaScript来检测和执行转换，然后使用CSS或JavaScript来执行动画

有许多基于jquery的脚本可用于实现这一点。以下是一个例子：

---

---

1。创建一个Html元素，检查它是否在视口中

<div class="demo"></div>

2。在文档末尾加载jQuery javascript库和jQuery视口检查器插件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>

3。调用此元素上的插件并在javascript中执行某些操作

<script>
$(document).ready(function(){
$('.demo').viewportChecker({
  // Class to add to the elements when they are visible
  classToAdd: 'visible',
 
  // The offset of the elements (let them appear earlier or later)
  offset: 100,
 
  // Add the possibility to remove the class if the elements are not visible
  repeat: false,
 
  // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
  callbackFunction: function(elem, action){}
  });
});
</script>

$（文档）.ready（函数（）{
$（'.demo'）.viewportChecker({
//类以在元素可见时添加到元素
classToAdd:'可见'，
//元素的偏移量（让它们显示得更早或更晚）
抵销：100，
//添加在元素不可见时删除类的可能性
重复：错，
//将类添加到元素后要执行的回调。操作将返回“添加”或“删除”，具体取决于该类是添加还是删除的
callbackFunction:函数（元素，动作）{}
});
});

---

您可以使用。交叉点观察者API提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉点中的更改的方法

<div class="demo"></div>

const startAnimation=（条目，观察者）=>{
entries.forEach（entry=>{
entry.target.classList.toggle（“从右侧滑入”，entry.isIntersecting）；
});
};
const observer=新的IntersectionObserver（startAnimation）；
const options={root:null，rootMargin:'0px'，阈值：1}；
const elements=document.querySelectorAll（'.card'）；
elements.forEach（el=>{
观察者。观察（el，选项）；
});
.card{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.从右侧滑入{
动画：1.5s从右向前滑动1s；
}
@关键帧向右滑动{
0% {
转化：translateX（50%）；
}
100% {
变换：translateX（0）；
}
}

第一张牌
第二张牌
第三张牌
我们可以强制在第一次之后不重做动画吗？未测试，但您可以在
条目中调用
observer.unobserve（）
。在从右侧动画类切换幻灯片后，foreach
循环。或者创建一个计数器或布尔值以仅显示动画一次。