aos.css动画库元素隐藏再显示的时候添加动画

按照官网说明引入css文件、js文件

aos.css官方说明

aos动画预览

🌰例子

<div class="yc-flex yc-items-center" onclick="handleShow()">show aos text</div>
<div style="display: none" id="aosText">aos</div>

function handleShow() {
    const aosText = document.getElementById('aosText')
    aosText.style.display = aosText.style.display === 'block' ? 'none' : 'block';
    if(aosText.style.display === 'block') {
        aosText.setAttribute('data-aos', 'flip-left')
        aosText.classList.add('aos-init')
        AOS.init()
    } else  {
        aosText.removeAttribute('data-aos')
        aosText.classList.remove('aos-init', 'aos-animate')
    }
}