在附加元素中添加效果答案

【问题标题】：adding effect in appended element在附加元素中添加效果
【发布时间】：2014-12-05 17:12:05
【问题描述】：

This is the fiddle。有一个列表组。通过单击“添加”按钮，将在有“创建”按钮的地方弹出一个窗口。单击“创建”按钮后，将在列表组中的“添加”按钮之前添加示例列表项。

现在，我想要一些效果，以便用户可以了解创建的列表项的添加位置。所以，我正在考虑在附加元素中添加不同的颜色，并像fadeOut() 一样平滑地消失不同的颜色。这就是为什么在追加的时候，我添加了一个名为 .temp 的新类并设置了它的样式。所以，添加“创建列表”后，它看起来不一样了。现在，我怎样才能立即（可能在 2/3 秒内）顺利移除 .temp 类？

【问题讨论】：

标签： jquery fadeout appendchild

【解决方案1】：

在 2/3 秒后删除它很容易：http://jsfiddle.net/TrueBlueAussie/hfof316a/3/

$('body').on('click', '.create-list', function () {
    var $element = $('<a href="#" class="list-group-item temp" data-toggle="modal" data-target="#listPopup"> Created List <span class="glyphicon glyphicon-remove-circle pull-right remove"></span> </a>');
    $('.add').before($element);
    setTimeout(function(){
        $element.removeClass("temp");
    }, 666);
});

您还需要在项目上设置过渡（而不是临时）：

http://jsfiddle.net/TrueBlueAussie/hfof316a/6/

【讨论】：

我应该在哪里使用 CSS 过渡？我已经在 .temp 类中使用过它。
@user1896653: 已排序...过渡需要应用于 CSS 中的非 .temp 项。
没有特殊原因！！其实，你先回答了。但是，这不是 100% 的解决方案（即：过渡问题）。 “在你编辑之前”，一个新的答案出现了，它提供了 100% 的解决方案。这就是为什么，我选择了那个答案。
你是对的。您首先在新答案之前对其进行了编辑。但是，不幸的是，我没有注意到这一点。今天，在你集中注意力之后，我注意到了这一点。但是，我感到尴尬的是从其他人那里删除“已接受”的答案，因为这也是正确的，那个人可能会为此感到难过/生气。这就是为什么，我不明白我该怎么做。但是，另一方面，你并不像一开始应得的那样快乐。没有注意到编辑时间是我的错误。所以，我刚刚接受了你的回答。对不起，再次感谢！
@user1896653：谢谢。

【解决方案2】：

一段时间后删除temp类：

setTimeout(function () {
    $(".temp:first").removeClass("temp");
}, 1000);

并将过渡添加到list-group-item 类而不是temp 类（因为它会在一段时间后被删除）。

.list-group-item {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

See updated fiddle here.

【讨论】：