淡入评论列表

作者: Jadon7 | 来源:发表于2018-10-21 20:52 被阅读0次

淡入评论列表
父组件向子组件传递方法的案例
列表的slideDown与淡入效果对比
18.组件案例评论列表
小程序云函数多个函数的同步使用
查漏补缺(一)
评论列表案例
JQ 淡入淡出
iOS 新浪微博的消息模块怎么做？
jquery6

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>淡入评论列表</title>
    <style>
        * {
            margin:0; 
            padding:0;
        }
        #ul1 {
            width:400px; 
            height:400px; 
            border:1px solid black; 
            margin:10px auto; 
            overflow:hidden;
        }
        #ul1 li {
            border-bottom:1px #999 dashed; 
            padding:4px; list-style:none; 
            opacity:0;
        }
</style>
    <script src="move2.js"></script>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            var oTxt = document.getElementById('txt1');

            oBtn.onclick = function () {
                var oLi = document.createElement('li');

                oLi.innerHTML = oTxt.value;
                oTxt.value = '';

                if (oUl.children.length > 0) {
                    oUl.insertBefore(oLi, oUl.children[0]);
                } else {
                    oUl.appendChild(oLi);
                }

                var iHeigth = oLi.offsetHeight;

                oLi.style.height = '0';

                startMove(oLi, { height: iHeigth, opacity: 100 });
            }
        }
    </script>
</head>

<body>
    <textarea id="txt1" rows="4" cols="40"></textarea>
    <input id="btn1" type="button" value="发布" />
    <ul id="ul1">
    </ul>
</body>

</html>