CSS3原生实现淡入淡出效果

太过爱你忘了你带给我的痛 2022-05-23 07:28 278阅读 0赞

<!DOCTYPE HTML>  
    <html>  
    <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
    <title>淡入淡出效果</title>  
    <style type="text/css">  
        #targetDiv  
        {  
            width: 150px;  
            height:200px;  
            text-align:center;  
            padding-top:80px;  
            background: #8a8a8a;  
            color: #fff;  
              
            position:absolute;  
            opacity: 0;  
            top:50px;  
            left:-100px;  
            -webkit-transition: all .5s ease-in;  
            -moz-transition: all .5s ease-in;  
            transition: all .5s ease-in;  
        }  
        #targetDiv.move  
        {  
            left: 10px;  
            opacity: 1;  
        }  
        
        .btnout,.btnin  
        {  
            padding:10px 20px;  
            background: #ff5a37;  
            color: #fff;  
            text-decoration: none;  
        }  
    </style>  
    </head>  
    <body>  
        <a href="javascript:;" class="btnout">滑出</a>  
        <a href="javascript:;" class="btnin">滑入</a>  
      
        <div id="targetDiv">  
            淡入淡出面板  
        </div>  
      
    <script>  
        (function(){  
            document.querySelector('body').addEventListener('click',function(e){  
                if(e.target.className === 'btnin')  
                {  
                    document.querySelector('#targetDiv').className = 'move';  
                }  
                else  
                {  
                    document.querySelector('#targetDiv').className = '';  
                }  
            },false);  
        })();  
    </script>  
    </body>  
    </html>