要实现长页面滑动到指定位置触发动画效果(亲测有效)

?1.添加触发动画的元素：在你的 HTML 文件中，将需要触发动画的元素添加相应的类名<div class="animation">
? ? ? <p>安全工矿 &nbsp; 智能工矿 安全工矿 &nbsp; 智能工矿</p>
? ? </div>

给一个 <div> 元素添加 .animation 类名

表示滚动到该元素时触发淡入动画效果：

<template>
  <!-- 品牌管理 -->
  <div class="app-page">
    <div class="first">
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
      <h1>111</h1><br />
    </div>
    <!-- 需要触发动画的位置 -->
    <div class="animation">
      <p>安全工矿 &nbsp; 智能工矿 安全工矿 &nbsp; 智能工矿</p>
    </div>
    <div class="other">
      <p>其他</p>
    </div>
  </div>
</template>

js:编写 JavaScript 逻辑：在 JavaScript 中，我们需要监听滚动事件，并判断滚动位置是否达到触发动画的条件。一旦条件满足，我们为元素添加触发动画的类名

<script lang="ts" setup>
// 监听窗口滚动事件
window.addEventListener('scroll', function () {
  // 获取元素的位置信息
  let element: any = document.querySelector('.animation');
  let position = element.getBoundingClientRect();

  // 判断元素是否进入视窗
  if (position.top <= window.innerHeight) {
    // 添加触发动画的类名
    element.classList.add('animation');
  }
});
</script>

使用 CSS3 的 @keyframes 规则来创建自定义的动画效果

<style lang="scss" scoped>
.app-page {
  width: 100%;
  overflow: auto;

  .first {
    width: 100%;

  }

  .animation {
    width: 100%;
    font-weight: 700;
    animation: fadeInAnimation 2s ease-out 0s backwards;
  }
}


@keyframes fadeInAnimation {
  0% {
    transform: translate(-100px);
    opacity: 0;
  }

  50% {
    transform: translate();
    opacity: 0.5;
  }

  100% {
    transform: translate(0);
  }
}
</style>

?