缩放ScrollView而不中断滚动

Question

简短的问题。我怎么能添加一个大小修改器使用Transitionable ScrollView，而不破坏滚动本身?似乎它以某种方式阻止了事件。

代码:

define('main', function (require, exports, module) {
    var Engine          = require('famous/core/Engine');
    var Surface         = require('famous/core/Surface');
    var Transform       = require('famous/core/Transform');
    var Scrollview      = require('famous/views/Scrollview');
    var Modifier        = require("famous/core/Modifier");
    var Transitionable  = require("famous/transitions/Transitionable");
    var context = Engine.createContext();
    var sizeTrans = new Transitionable(0);
    var sizeModifier = new Modifier({
        transform : function(){
            var s = sizeTrans.get() + 1;
            return Transform.scale(s, s, 0);
        }
    });
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);
    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });
        surface.pipe(scrollview);
        surfaces.push(surface);
    }
    context
       .add(sizeModifier)
       .add(scrollview);
});

我试图创建一个活生生的例子，但不幸的是它不工作:/http://jsfiddle.net/7fzfx19h/1/

Answer 1

修复了我的代码，现在演示工作http://jsfiddle.net/7fzfx19h/2/:

define('main', function (require, exports, module) {
    var Engine          = require('famous/core/Engine');
    var Surface         = require('famous/core/Surface');
    var Transform       = require('famous/core/Transform');
    var Scrollview      = require('famous/views/Scrollview');
    var Modifier        = require("famous/core/Modifier");
    var Transitionable  = require("famous/transitions/Transitionable");
    var context = Engine.createContext();
    var sizeTrans = new Transitionable(0);
    var sizeModifier = new Modifier({
        transform : function(){
            var s = sizeTrans.get() + 1;
            return Transform.scale(s, s);
        }
    });
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);
    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });
        surface.pipe(scrollview);
        surfaces.push(surface);
    }
    context.add(sizeModifier).add(scrollview);
});