CSS3原生實現淡入淡出效果
阿新 • • 發佈：2019-02-12
<!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>