AOS库问题：如何让元素显示后不再随滚动消失

要让元素触发AOS动画后保持静态不再消失，有两种直接的解决方式：

1. 单个元素单独设置 #

直接在目标元素上添加data-aos-once="true"属性，该元素的动画仅会在第一次进入视口时触发一次，之后无论滚动方向如何，都会保持动画结束后的状态：

<div data-aos="zoom-in" data-aos-once="true"></div>

2. 全局统一配置所有元素 #

如果希望项目中所有使用AOS的元素都遵循单次触发规则，可以在Angular根组件的初始化逻辑里设置AOS全局配置。比如在AppComponent的ngOnInit钩子中初始化AOS时添加once: true：

import AOS from 'aos';
import 'aos/dist/aos.css';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    AOS.init({
      once: true // 全局启用单次动画模式
    });
  }
}

once: true会改变AOS的默认行为：默认状态下，元素每次进入/离开视口都会触发显示/隐藏的动画逻辑；开启该配置后，动画仅在元素首次进入视口时执行，后续滚动过程中元素会保持动画完成后的状态，不再随滚动重复变化。

内容的提问来源于stack exchange，提问作者ayala