Question

Famous.Engine = famous.core.Engine;
Famous.Surface = famous.core.Surface;
Famous.RenderNode = famous.core.RenderNode;
Famous.ContainerSurface = famous.surfaces.ContainerSurface;
Famous.ScrollView = famous.views.Scrollview;
Famous.SequentialLayout = famous.views.SequentialLayout;


Famous.Transform = famous.core.Transform;
Famous.Transitionable = famous.transitions.Transitionable;
Famous.SnapTransition = famous.transitions.SnapTransition;
Famous.TransitionableTransform = famous.transitions.TransitionableTransform;

Famous.Modifier = famous.core.Modifier;
Famous.StateModifier = famous.modifiers.StateModifier;
Famous.Easing = famous.transitions.Easing;
Famous.EventHandler = famous.core.EventHandler;


var projectsList = document.getElementById('projects-list');    
var mainContext = Famous.Engine.createContext(projectsList);

var sequentialLayout = new Famous.SequentialLayout({
    direction: 0
});

Famous.Transitionable.registerMethod('snap', Famous.SnapTransition);

var snap = { method: 'snap', period: 600, dampingRatio: 0.6 }

var surfaces = [];

for (var i = 0; i < 20; i++) {

    var surface = new Famous.Surface({
        content: "Surface: " + (i + 1),
                    size: [300, $(window).height()],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            textAlign: "center"
        }
    });

    surface.open = false;

    surface.state = new Famous.Modifier({
        size: [undefined, undefined]
    });

    surface.trans = new Famous.Transitionable(300);

    surface.state.sizeFrom(function(){
            return [this.trans.get(), undefined];
    }.bind(surface));

    surface.node = new Famous.RenderNode();

    surface.node.add(surface.state).add(surface);

    surface.pipe(sequentialLayout);

    surface.on('click',function(e){
        if (this.open) {
            this.trans.halt();
            this.trans.set(300, snap);
        } else {
            this.trans.halt();
            this.trans.set($(window).width(), snap);
        }
        this.open = !this.open;

    }.bind(surface));

    surfaces.push(surface.node);
        sequentialLayout.sequenceFrom(surfaces);
}

mainContext.add(sequentialLayout);

曲面可以很好地转换它们的X位置，但不要将它们的宽度从300px改变。如果窗口处于关闭状态，我还希望点击的表面改变其宽度以填充窗口的宽度。如果在打开状态下单击，我希望曲面返回到其初始宽度300px。如何实现这一点，以便宽度动画而不是跳转到指定的大小？

Answer 1

关键是在创建曲面时不指定静态宽度或高度：

    var surface = new Famous.Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, undefined], /* removed the original [300, $(window).height()] */
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            textAlign: "center"
        }
    });

Answer 2

删除Surface

的大小

var surface = new Famous.Surface({
    content: "Surface: " + (i + 1),
    properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        textAlign: "center"
    }
});

Famo.us：为什么单击表面的宽度会变化？

2 个答案:

删除Surface