javascript - 通过使用不透明度和过渡，动态生成的元素看起来很低？ (JavaScript，CSS)

Question

我的目标是通过按下一个按钮来创建一个 li 元素。这个元素应该慢慢出现。我想在 jquery 中使用 css 和 javascript。

这就是我的尝试:

$(document).on('click', '.add', function(){

    var li = '<li style="transition: all 10s; opacity: 0;"> some content </li>';
    $(li).appendTo("ul");
    $("li").last().css( "opacity", "1" );

});

遗憾的是这没有用。由于某种原因，延迟对生成的 li 元素没有影响。那么我需要更改什么？

Answer 1

检查一下...这将解决您的问题

http://jsfiddle.net/tirthrajbarot/tfmFx/39/

html

<button>Click me</button>


<ul id="myList">
</ul>

JS:

   $('button').live('click', function() {
    $("#myList").append("<li class='fade'>This is just a test</li>")
        setTimeout(function(){$(".fade").addClass("in");}, 0)
});

CSS

 .fade.in { opacity:1;}
 .fade {  opacity: 0; -webkit-transition: opacity 0.7s linear; }