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

2024-01-09 12:45:29

按照官网说明引入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')
    }
}

文章来源:https://blog.csdn.net/qq_40230735/article/details/135476294
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。