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

Amodoro

已于 2024-10-22 13:35:52 修改

阅读量881

点赞数 7

分类专栏：插件文章标签： css 前端 aos.css 前端动画库

于 2024-01-09 11:34:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40230735/article/details/135476294

版权

插件专栏收录该内容

13 篇文章

订阅专栏

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

aos.css官方文档

aos动画预览

🌰例子


<div 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')
    }
}