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