1

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

  1. 是否可以将过渡应用到页眉和页脚的高度HeaderFooterLayout？
  2. 如何显示一个典型的密码框，其中所有字符都显示为 *？
4

2 回答 2

3

和很多默认不支持的动画一样，你可以通过使用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'
});
于 2014-05-15T04:32:59.000 回答
0

^ 在 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; }
于 2014-08-30T13:50:42.037 回答