Анимация полета только на фокусе

Question

Я хочу создать эффект fly-in только на фокусе блока с определенным классом (а не при загрузке страницы) в приложении Angular. Возможно, без 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 и добавляю его через 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>