如何翻入famo.us？

Question

如何使用 famo.us 对我的 Container Surface 执行 this？我的容器表面看起来像这样：

var input1Fix=new ContainerSurface({
    size:[241,40],
    properties:{
        backgroundColor:'black',
        overflow:'hidden'
    }
});
input1FixModifier= new Modifier({
    origin:[1, 0.5],
    align:[1, 0.5]
});
var mailContainer= new ContainerSurface({
    size:[40,40],
    properties:{
        backgroundColor:'#483f3e',
        overflow:'hidden'
    }
});

var mailContainerModifier= new Modifier({
    origin:[0, 0.5],
    align:[0, 0.5]
});
var mail= new ImageSurface({
    size:[20, 20],
    content:'img/mail.png',
    overflow:'hidden'
});
var mailModifier= new Modifier({
    origin:[0.5, 0,5],
    align:[0.5, 0,5],
    transform: Transform.translate(0, 10)

});
var input1= new InputSurface({
    size:[200,40],
    placeholder:' E-mail:',
    properties:{
        backgroundColor:'#483f3e',
        border:'#483f3e',
        color:'#9d9492',
        overflow:'hidden'
    }
});

var input1Modifier=new Modifier({
    origin:[0.5,0.5],
    align:[0.5,0.5]
   });

因此，我希望当我单击表面时它会旋转并改变颜色。最好的方法是什么？

我是 famo.us 和 javascript 的初学者，所以，任何帮助都是很好的帮助。感谢理解 ;)

Answer 1

您可以使用 Flipper 视图并使用表面或视图设置背面和正面。

要使其水平翻转，请按照以下代码段设置选项 direction: Flipper.DIRECTION_Y。

define('main',function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Flipper    = require("famous/views/Flipper");
    var Modifier   = require("famous/core/Modifier");

    var mainContext = Engine.createContext();
    mainContext.setPerspective(500);

    var flipper = new Flipper({
        direction: Flipper.DIRECTION_Y
    });

    var frontSurface = new Surface({
        size : [200, 200],
        content : 'front',
        properties : {
            background : 'red',
            lineHeight : '200px',
            textAlign  : 'center'
        }
    });

    var backSurface = new Surface({
        size : [200, 200],
        content : 'back',
        properties : {
            background : 'blue',
            color : 'white',
            lineHeight : '200px',
            textAlign  : 'center'
        }
    });

    flipper.setFront(frontSurface);
    flipper.setBack(backSurface);

    var centerModifier = new Modifier({
        align : [.5,.5],
        origin : [.5,.5]
    });

    mainContext.add(centerModifier).add(flipper);

    var toggle = false;
    Engine.on('click', function(){
        var angle = toggle ? 0 : Math.PI;
        flipper.setAngle(angle, {curve : 'easeOutBounce', duration : 500});
        toggle = !toggle;
    });
});
require(['main']);

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

如何翻入famo.us？

How to flip in famo.us?

famo.us