我正在尝试使用zIndex属性控制曲面的分层。它在Chrome中运行得很好,而在Firefox中却没有。在检查DOM之后,我观察到无论我们设置什么,z-index都标记为0。
我在famo.us教程代码@ http://famo.us/university/famous-101/displaying/5/中重现了这个问题。用以下代码替换教程代码。请注意使用相同代码的Chrome和Firefox之间的区别。
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var firstSurface = new Surface({
size: [200, 400],
content: 'top',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F',
zIndex: 10
}
});
var secondSurface = new Surface({
size: [300, 200],
content: 'bottom',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: 'green',
zIndex: 8
}
});
mainContext.add(firstSurface);
mainContext.add(secondSurface);
答案 0 :(得分:2)
您应该尽量避免使用zIndex属性,因为Famo.us使用3D渲染引擎为您做Z索引。要实现您的目标,请使用StateModifier并在Z方向上平移曲面。
这也适用于FireFox。希望它有所帮助!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var firstSurface = new Surface({
size: [200, 400],
content: 'top',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
firstSurface.state = new StateModifier({
transform: Transform.translate(0,0,10)
});
var secondSurface = new Surface({
size: [300, 200],
content: 'bottom',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: 'green',
}
});
secondSurface.state = new StateModifier({
transform:Transform.translate(0,0,8)
});
mainContext.add(firstSurface.state).add(firstSurface);
mainContext.add(secondSurface.state).add(secondSurface);