我有一个UL,我正在努力通过一些动画动态地将一个新的LI添加到UL的顶部。
到目前为止,我有以下几个工作正常的:
$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");
#container
是UL
上面的问题是隐藏了整个UL,然后向下滑动整个UL,我只想要预先设置动画的新LI。
想法?thxs
发布于 2015-09-09 05:36:23
这应该会有帮助
使用关键帧动画
.comefromtop {
animation: comefromtop 0.5s;
}
.pushdown {
animation: pushdown 0.5s;
}
@-webkit-keyframes comefromtop {
0% { opacity:0; -webkit-transform: translateY(-100%); }
100% { opacity:1; -webkit-transform: translateY(0px); }
}
@-webkit-keyframes pushdown {
0% { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
100% { /*opacity:1;*/ -webkit-transform: translateY(0); }
}
并使用基本的javascript
function add() {
var val = $('#input').val();
var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val); $('#Trees').prepend(item).addClass('pushdown');
setTimeout(function () {
$('#Trees').removeClass('pushdown');
}, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
if (e.keyCode === 13) {
add();
}
});
你可以达到敬畏的程度。
https://stackoverflow.com/questions/2883154
复制相似问题