javascript - 仅在焦点上出现飞入动画

Question

我想在 Angular 应用程序中仅在具有特定类的 block 焦点上创建飞入效果(而不是在页面加载时)。这可能不需要 jquery 或其他库(我搜索过，但发现实际上只有 jquery 的解决方案，我没有在我的 Angular 应用程序上使用它)。我用 Angular 标签询问，因为我在 Angular 应用程序中，但也许还有一种只使用 css 的方法？

一个在焦点上不起作用但在页面加载时不起作用的示例:

#first-page {
  height: 100vh;
  background-color: red;
  color: white;
  line-height: 100%;
}
#second-page {
  height: 100vh;
  background-color: green;
  color: white;
  line-height: 100%;
}
.fly-in-block {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  transform: translateX(-600%);
  -webkit-transform: translateX(-600%);
}
.flyIn {
  animation: flyIn 0.8s forwards;
  -webkit-animation: flyIn 0.8s forwards;
}
@keyframes flyIn {100% { transform: translateX(0%); }}
@-webkit-keyframes flyIn {100% { -webkit-transform: translateX(0%); }}

<div id="first-page">
  First page
</div>
<div id="second-page">
  Second page
  <div class="fly-in-block flyIn"></div>
</div>

这里是 Angular 代码片段的链接: https://stackblitz.com/edit/angular-fly-in-animation-on-focus?file=src%2Fapp%2Fapp.component.css

Answer 1

我不知道你所说的焦点是什么意思。您在寻找这样的东西吗？您也许可以根据您的需要进行调整。

在 html 中看到，我删除了 flyIn 类，并仅在 block 滚动到 View 中时通过 js 添加它。

一旦触发动画，监听器就会被删除。

const block = document.querySelector( '.fly-in-block' )
const blockOffset = block.offsetTop

const triggerAnimation = () => {
  const scrollHeight = document.body.scrollHeight
  if( scrollHeight >= blockOffset ) {
    block.classList.add( 'flyIn' )
    window.removeEventListener( 'scroll', triggerAnimation )
  }
}

window.addEventListener( 'scroll', triggerAnimation )

#first-page {
  height: 100vh;
  background-color: red;
  color: white;
  line-height: 100%;
}
#second-page {
  height: 100vh;
  background-color: green;
  color: white;
  line-height: 100%;
}
.fly-in-block {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  transform: translateX(-600%);
  -webkit-transform: translateX(-600%);
}
.flyIn {
  animation: flyIn 0.8s forwards;
  -webkit-animation: flyIn 0.8s forwards;
}
@keyframes flyIn {100% { transform: translateX(0%); }}
@-webkit-keyframes flyIn {100% { -webkit-transform: translateX(0%); }}

<div id="first-page">
  First page
</div>
<div id="second-page">
  Second page
  <div class="fly-in-block"></div>
</div>