famo.us：我可以爲頁眉頁腳佈局的頁眉/頁腳高度設置動畫效果嗎？

Question

我想要我的頁眉和頁腳幾乎佔據了整個屏幕（中間會有一條細線留在文本框中，如果用戶輸入正確的密碼，我希望文本框消失和頁眉和頁腳逐漸變短（使內容更房間出現在屏幕的中心）。

1. 是否有可能申請到頁眉和頁腳在HeaderFooterLayout高度的過渡？
2. 如何顯示一個典型的密碼框，其中的字符全部顯示爲*的？

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：

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