在我的 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)}
最佳答案
您提到的这种“hack”(或它的某些变体)有时对于 Web 开发是必需的,这仅仅是由于浏览器呈现页面的方式的性质。
(注意:这一切都是靠内存,所以虽然整体想法是正确的,但请对任何细节持保留态度。)
假设您执行以下操作:
$('#someElement').css('backgroundColor', 'red');
$('#someElement').css('backgroundColor', 'blue');
您可能希望看到 #someElement
的背景颜色短暂地闪烁红色,然后变成蓝色,对吗?然而,这不会发生,因为浏览器试图通过仅在 JS 执行结束时渲染最终状态来优化渲染性能。结果,红色背景永远不会出现在页面上;你所看到的都是蓝色。
同样这里,区别:
- 附加
- 设置类(class)
和:
- 附加
- 等待 1 毫秒让 JS 执行完成
- 设置类(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()
。
关于javascript - 在 Backbone 应用程序的渲染功能上使用 addClass() 和 CSS transition 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16255826/