css display:none 动画

古月的博客

已于 2023-12-03 19:18:08 修改

阅读量1k

点赞数 9

文章标签： css nginx 前端

于 2023-12-03 19:15:00 首次发布

本文链接：https://blog.csdn.net/qq_34345149/article/details/134768715

版权

display:本身不支持动画，必须结合opacity实现动画效果：
代码:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  .item {  
    opacity: 1;  
    transition: opacity 0.5s linear;  
    
  }  
  .item-display {   
    display: none;  
  }  
  .item-opacity{
    opacity: 0;
  }
</style>  
</head>  
<body>  
  
<h1 class="item">Hello World!</h1>  
  
<button onclick="toggle()">Show</button>  
  
</body>  
<script>

    // 切换动画函数
    function toggle(){
        if (document.querySelector('.item').classList.contains('item-display')) {
            document.querySelector('.item').classList.remove('item-display')
            
            // 这里是关键:display和opacity同时执行，动画无法正常执行，必须设置1个时间间隔,只要大于0就行
            setTimeout(function(){

                document.querySelector('.item').classList.remove('item-opacity')
            },1)
        } else {
            document.querySelector('.item').classList.add('item-opacity')
            setTimeout(function(){

                document.querySelector('.item').classList.add('item-display')
            },500)
        }  
    }

</script>
</html>