gpt4 book ai didi

javascript - famo.us Firefox 设置 z-index 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 03:44:17 24 4
gpt4 key购买 nike

我正在尝试使用 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);

最佳答案

您应该尽量避免使用 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);

关于javascript - famo.us Firefox 设置 z-index 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24391674/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com