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

Question

HTML 元素如何在屏幕上出现后立即呈现动画？

我在堆栈溢出游览页面上找到了一个示例，只要向下滚动足够远，信息元素就会滑入页面。这背后有何玄机？

Answer 1

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

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

有许多基于 jquery 的脚本可用于完成此操作。这是一个例子：

---

演示

---

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

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

2. 在文档末尾加载 jQuery javascript 库和 jQuery Viewport Checker 插件。

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

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

<script>
$(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>

---

下载此脚本

Answer 2

您可以使用 intersection Observer 来实现此目的。 Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口相交变化的方法。

const startAnimation = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("slide-in-from-right", entry.isIntersecting);
  });
};

const observer = new IntersectionObserver(startAnimation);
const options = { root: null, rootMargin: '0px', threshold: 1 }; 

const elements = document.querySelectorAll('.card');
elements.forEach(el => {
  observer.observe(el, options);
});

.card {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-in-from-right {
  animation: 1.5s ease-out 0s 1 slideInFromRight forwards;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="card">
  <h2>Card one</h2>
</div>
<div class="card">
  <h2>Card two</h2>
</div>
<div class="card">
  <h2>Card three</h2>
</div>