javascript - 在 Backbone 应用程序的渲染功能上使用 addClass() 和 CSS transition 无法正常工作

Question

在我的 backbone.js 应用程序中，我试图在 View 元素被附加后淡入淡出。但是它不起作用。

此处为实例:http://metropolis.pagodabox.com

    var itemRender = view.render().el;

    $('#items-list').append(itemRender);
    $(itemRender).addClass('show'); 

但是，如果我添加一个小的 setTimeout 函数，它就会起作用。

    var itemRender = view.render().el;

    $('#items-list').append(itemRender);

    setTimeout(function(){
        $(itemRender).addClass('show'); 
    },10);

使用 fadeIn() 也可以，但我更喜欢直接使用 CSS 进行转换，因为它更有效，并且不喜欢使用任何 setTimeout“hacks”来强制它工作。是否有可用于追加的回调？或者有什么建议？完整代码如下:

itemRender: function (item) {
    var view = new app.ItemView({ model: item }),
        itemName = item.get('name'),
        itemRender = view.render().el;

    $('#items-list').append(itemRender);
    $(itemRender).addClass('show');

    app.itemExists(itemName);
}

CSS/更少:

#items-list li {
    padding: 0 10px;
    margin: 0 10px 10px;
    border: 1px solid @black;
    .border-radius(10px);
    position: relative;
    .opacity(0);
    .transition(opacity)
}

#items-list li.show {.opacity(1)}

Answer 1

您提到的这种“hack”(或它的某些变体)有时对于 Web 开发是必需的，这仅仅是由于浏览器呈现页面的方式的性质。

(注意:这一切都是靠内存，所以虽然整体想法是正确的，但请对任何细节持保留态度。)

假设您执行以下操作:

$('#someElement').css('backgroundColor', 'red');
$('#someElement').css('backgroundColor', 'blue');

您可能希望看到 #someElement 的背景颜色短暂地闪烁红色，然后变成蓝色，对吗？然而，这不会发生，因为浏览器试图通过仅在 JS 执行结束时渲染最终状态来优化渲染性能。结果，红色背景永远不会出现在页面上；你所看到的都是蓝色。

同样这里，区别:

1. 附加
2. 设置类(class)

和:

1. 附加
2. 等待 1 毫秒让 JS 执行完成
3. 设置类(class)

后者是让元素进入页面后在JS执行后改变样式，而前者只是在元素显示之前应用样式改变。

因此，虽然通常应该避免 window.setTimeout，但当您需要处理这些...浏览器渲染的复杂情况时，这确实是唯一的方法。我个人喜欢使用 Underscore 库的 defer 函数:

var itemRender = view.render().el;

$('#items-list').append(itemRender);

_(function(){
    $(itemRender).addClass('show'); 
}).defer();

这是同一个该死的东西，但因为它被封装在一个库函数中，所以我觉得它不那么脏 :-)(如果“后渲染”逻辑超过一两行，我可以将它分解为一个Backbone View 方法并在我的 render 方法中执行 _(this.postRender).defer()。