Question

我希望我的页眉和页脚几乎占据整个屏幕（中间只剩下一条细线，其中包含一个文本框。如果用户输入正确的密码，我希望文本框消失，页眉和页脚逐渐缩短（为屏幕中心的内容腾出更多空间）。

是否可以将转换应用于HeaderFooterLayout上的页眉和页脚的高度？
如何显示一个典型的密码框，其中所有字符都显示为*＆＃39; s？

Answer 1

与许多默认情况下不支持的动画一样，您可以使用Transitionable类添加转换。以下是单击它时展开标题的示例..

var Engine             = require("famous/core/Engine");
var Surface            = require("famous/core/Surface");
var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
var Transitionable     = require("famous/transitions/Transitionable");
var Easing             = require("famous/transitions/Easing");

var mainContext = Engine.createContext();

var layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50
});

var header = new Surface({
    size: [undefined, undefined],
    content: "Header",
    classes: ["red-bg"],
    properties: {
        lineHeight: "100px",
        textAlign: "center"
    }
})

var open = false;

header.on("click",function(){

  var transition = {duration: 400, curve: Easing.inOutQuad };

  var start =   open ? 200 : 100 ;
  var end   =   open ? 100 : 200 ;

  open = !open;

  var transitionable = new Transitionable(start);

  var prerender = function(){ layout.setOptions({ headerSize: transitionable.get()} ) };

  var complete = function(){ Engine.removeListener('prerender', prerender) };

  Engine.on('prerender', prerender);

  transitionable.set(end, transition, complete);

});

layout.header.add(header);

layout.content.add(new Surface({
    size: [undefined, undefined],
    content: "Content",
    classes: ["grey-bg"],
    properties: {
        lineHeight: window.innerHeight - 150 + 'px',
        textAlign: "center"
    }
}));

layout.footer.add(new Surface({
    size: [undefined, 50],
    content: "Footer",
    classes: ["red-bg"],
    properties: {
        lineHeight: "50px",
        textAlign: "center"
    }
}));

mainContext.add(layout);

对于密码字段，您只需创建一个InputSurface并将其类型设置为密码..

inputSurface = new InputSurface({
  size:[200,60],
  type: 'password'
});

Answer 2

^在headerSize上使用Transitionable时，请注意性能问题。特别是iOS 7的iPhone看起来很奇怪。

你也可以通过CSS过渡动画页眉/页脚大小，虽然它有点像泡泡糖修复并且有它的缺陷：

var headerContainer = new ContainerSurface({
    size: [undefined, 50],
    classes: ['my-header']
  });

layout.header.add(headerContainer);

headerContainer.setSize([undefined,300]);

然后在CSS中：

.my-header { transition: 200ms all; }

famo.us：我可以为页眉页脚布局的页眉/页脚高度设置动画吗？

2 个答案: