利用css的transition和opacity属性实现原生淡入淡出效果

使用方法

主要使用CSS的opacity和transition属性，利用opacity从1到0隐藏、从0到1显示，在使用transition规定以慢速开始的过渡效果就能实现了。

HTML结构

<a href="javascript:;" class="btnout">滑出</a>
<a href="javascript:;" class="btnin">滑入</a>

<div id="targetDiv">
    淡入淡出面板
</div>

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;
        }

javascript代码

(function(){
        document.querySelector('body').addEventListener('click',function(e){
            if(e.target.className === 'btnin')
            {
                document.querySelector('#targetDiv').className = 'move';
            }
            else
            {
                document.querySelector('#targetDiv').className = '';
            }
        },false);
    })();