JS-发布消息的一个运动小效果

模仿一些网站发布消息时候，淡入，缓慢滑动的小效果，废话不多说，看下最终测试效果！有图有真相！

接下来一步步分析实现的过程，一下是为了演示过程中一些注意点，用的测试代码，不是最终效果代码，最终效果代码，我贴在文章最后！！

html代码

<textarea  id="content" cols="60" rows="10"></textarea><br>
<input id="btn1" type="button" value="发布">
<ul id="ulList">
    <li>1233</li>
</ul>

样式代码

<style>
        *{padding: 0;margin: 0;}
        #ulList{
            list-style: none;
            width: 300px;height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
        }
        #ulList li{
            border-bottom: 1px dashed #c00;
            padding: 2px;
        }
</style>

<script>
    window.onload = function () {
        var oTxt = document.getElementById('content');
        var oBtn = document.getElementById('btn1');
        var oUl = document.getElementById('ulList');

        oBtn.onclick = function () {
            var oLi = document.createElement('li');// 创建一个li元素
            oLi.innerHTML = oTxt.value;
            oTxt.value = '';
            oUl.appendChild(oLi);
        }
    }
</script>

这里每次新创建的li都是放在尾部，如果想让它创建好放在顶部，需要判断一下，如果当前ul里没有li，那么直接appendChild，如果有已经有li元素，就用insertBefore

oBtn.onclick = function () {
            var oLi = document.createElement('li');
            var aLi = oUl.getElementsByTagName('li');// 获取的ul下的所有li

            oLi.innerHTML = oTxt.value;
            oTxt.value = '';
            if(aLi.length){ // 判断ul里有没有li元素
                oUl.insertBefore(oLi);
            }else{
                oUl.appendChild(oLi);
            }
}

到这里插入每一条内容，都会从头部插入了，但是插入的动作太生硬了，这里就用我们的运动框架，来使插入变得平滑；

首先保证先引入了运动框架：<script src="move.js"></script> 运动框架在《JS完美运动框架》中有代码

<script>
    window.onload = function () {
        var oTxt = document.getElementById('content');
        var oBtn = document.getElementById('btn1');
        var oUl = document.getElementById('ulList');

        oBtn.onclick = function () {
            var oLi = document.createElement('li');
            var aLi = oUl.getElementsByTagName('li');// 获取的ul下的所有li

            oLi.innerHTML = oTxt.value;
            oTxt.value = '';
            if(aLi.length){ // 判断ul里有没有li元素
                oUl.insertBefore(oLi,aLi[0]);// 在下标为0的li前插入oLi
            }else{
                oUl.appendChild(oLi);
            var iHeight = oLi.offsetHeight;
            oLi.style.height = 0;// 然后把li的高度置0
            startMove(oLi,{height:iHeight}, function () {
                startMove(oLi,{opacity:100});
            })

        }
    }
</script>

因为每个li的高度是不固定的，

var iHeight = oLi.offsetHeight;// 1.上来先把li的高度存一下

oLi.style.height = 0;// 2. 然后把li的高度置0

startMove(oLi,{height:iHeight})// 3. 通过运动框架重新把li的高度设回去

看一下运行效果发现，做运动的时候文字会超出li的边框(图中文字开始时超出了红框的)，需要在li的样式设置中：使overflow：hidden，问题就解决了

#ulList li{
            border-bottom: 1px dashed #c00;
            padding: 2px;
            overflow: hidden;
}

到这里问题就解决了，但是在IE7 下会有先卡一下在出来的的现象，所以这里需要将原来的ul嵌套li的布局，改成div套div

<textarea  id="content" cols="30" rows="10"></textarea><br>
<input id="btn1" type="button" value="发布"><br>
<div id="ulList">
    <div>1233</div>
</div>

<script>
    window.onload = function () {
        var oTxt = document.getElementById('content');
        var oBtn = document.getElementById('btn1');
        var oUl = document.getElementById('ulList');

        oBtn.onclick = function () {
            var oLi = document.createElement('div');//这里将li改成div
            var aLi = oUl.getElementsByTagName('div');//这里将li改成div
            oLi.innerHTML = oTxt.value;
            oTxt.value = '';
            if(aLi.length){
                oUl.insertBefore(oLi,aLi[0]);
            }else{
                oUl.appendChild(oLi);
            var iHeight = oLi.offsetHeight;
            oLi.style.height = 0;
            startMove(oLi,{height:iHeight}, function () {
                startMove(oLi,{opacity:100});// 透明度改变

            })
        }
    }
</script>

到这里效果就实现了

为了美观，修改一下样式，最终效果的代码如下

<div class="container">
    <textarea  id="content" cols="60" rows="10"></textarea><br>
    <input id="btn1" type="button" value="发布"><br>
    <div id="msgList">
        <div></div>
    </div>
</div>

<style>
        *{padding: 0;margin: 0;}
        body{background: url("body_repeat.png");}
        .container{
            width: 500px;
            margin: 10px auto;
        }
        #content{
            padding: 8px;
            background: rgba(255,255,255,.6);
            border: none;
            box-shadow: 2px 2px 3px rgba(0,0,0,.6);
            border-radius: 5px;
        }
        #btn1{
            border: none;
            width: 60px;height: 40px;
            background: #ffc09f;
            font-family:"微软雅黑";font-size:16px;color: #fff;
            border-radius: 5px;
        }
        #msgList{
            list-style: none;
            width: 420px;_height: 400px;min-height: 400px;
            background: rgba(255,255,255,.8);
            border-radius: 5px;
            border: 1px solid #eee;
            margin: 10px ;
        }
        #msgList div{
            border-bottom: 1px dashed #aaa;
            padding: 2px;
            opacity: 0;
            filter:alpha(opacity:0);
            overflow: hidden;
        }
 </style>

<script src="move.js"></script>
<script>
    window.onload = function () {
        var oTxt = document.getElementById('content');
        var oBtn = document.getElementById('btn1');
        var oDiv = document.getElementById('msgList');

        oBtn.onclick = function () {
            var newDiv = document.createElement('div');//每发布一条消息需要创建一个新div
            var aDiv = oDiv.getElementsByTagName('div');// 获取msgList的下的所有div元素

            newDiv.innerHTML = oTxt.value;//新div的内容就等于textarea里发布内容
            oTxt.value = ''; // 然后把textarea清空
            if(aDiv.length){ // 判断msgList里有没有div元素
                oDiv.insertBefore(newDiv,aDiv[0]);// 在下标为0的div前插入一个div
            }else{
                oDiv.appendChild(newDiv);
            }
            // 接下来是添加运动部分，因为插入的每个div的高度不固定
            var iHeight = newDiv.offsetHeight;// 先把div的高度存一下
            newDiv.style.height = 0;// 然后把div的高度置0
            startMove(newDiv,{height:iHeight}, function () {
                startMove(newDiv,{opacity:100});
            })//通过运动框架重新把div的高度设回去

        }
    }
</script>