动态生成的元素通过使用不透明度和过渡显得低?(JavaScript，CSS)

Question

我的目标是通过按下按钮创建一个 li 元素。 此元素应缓慢出现。我想将css和javascript与jquery一起使用。

这就是我尝试过的：

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

Answer 2

没有 css3 过渡，但工作 =）

$(document).on('click', '.add', function(){
    var $li = $('<li> some content </li>').hide();
    $("ul").append($li.fadeIn());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" class="add" value="add">
<ul></ul>

Answer 3

我看到 3 种方式：

• 使用 .animate( properties [, duration ] [, easing ] [, complete ] ) jQuery 方法描述;示例
• 使用 css 动画描述;示例
• 使用.css之前设置超时