famo.us：我可以动画显示页眉页脚布局的页眉/页脚的高度？(famo.us: can I ani

我希望有我的页眉和页脚，几乎占据整个屏幕（也将只是一个细线留在其中将包含一个文本框的中间。如果用户输入正确的密码，我想文本框消失，头和页脚逐渐变短（使内容出现在屏幕的中心更多的空间）。

是否有可能申请到页眉和页脚在高度的过渡HeaderFooterLayout ？
如何显示一个典型的密码箱里面的人物都显示为*的？

Answer 1:

像默认情况下不支持许多动画，您可以通过使用可转换类增加一个过渡。这里是当你点击它，它扩展了头部的例子..

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:

^在头信息长度使用可转换时当心性能问题。特别是与iOS 7的iPhone似乎行事出问题。

您还可以通过CSS过渡动画页眉/页脚大小，但它是一个有点泡泡糖修复，并有它的缺陷：

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

layout.header.add(headerContainer);

headerContainer.setSize([undefined,300]);

然后，在CSS：