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);
});

在不破坏滚动的情况下缩放ScrollView

1 个答案: