famo.us javascript中的意外行为

下面的代码为网格创建元素，并使用transformOut方法对其进行排列。这部分工作正常，但我希望网格在mousedown上塌陷到中心，然后在mouseup上再次弹出来。但是，对transformIn或transformOut函数的所有后续调用都会导致项目进出。下面是一个工作示例： 代码如下，谢谢您的帮助

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');

    var View            = require('famous/core/View');
    var Surface         = require('famous/core/Surface');
    var Modifier        = require('famous/core/Modifier');
    var StateModifier   = require('famous/modifiers/StateModifier');
    var EventHandler    = require('famous/core/EventHandler');
    var PhysicsEngine   = require('famous/physics/PhysicsEngine');
    var Transitionable  = require('famous/transitions/Transitionable');
    var SpringTransition= require('famous/transitions/SpringTransition');
    var Particle        = require('famous/physics/bodies/Particle');
    var Drag            = require('famous/physics/forces/Drag');
    var RepulsionForce  = require('famous/physics/forces/Repulsion');
    var Wall            = require('famous/physics/constraints/Wall');
    var Random          = require('famous/math/Random');
    var Transform       = require('famous/core/Transform');

    Transitionable.registerMethod('spring', SpringTransition);



    var context = Engine.createContext();

    var cols = 5;
    var rows = 5;
    var gridSize = Math.min(window.innerWidth, window.innerHeight) / 1.5;
    var itemSize = gridSize / (cols + 1);
    var gridItems = [];
    var transformOutArray = [itemSize / 2 - gridSize / 2,
                            (itemSize / 2 - gridSize / 2) / 2,
                            0,
                            (gridSize / 2 - itemSize / 2) / 2,
                            gridSize / 2 - itemSize / 2];

    var transformInArray = Array.prototype.slice.call(transformOutArray);
    transformInArray.reverse();


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

    context.add(camera).add(cameraView);




    function createGridItems(){
        for (var r = 0; r < rows; r += 1){
            for (var c = 0; c < cols; c += 1){
               var gridItem = new Surface({
                    size: [itemSize, itemSize],
                    properties:{
                        backgroundColor: '#aa62bb'
                    },
                    content: r + "," + c
                });

                gridItem.mod = new StateModifier({
                    origin: [0.5, 0.5],
                    align: [0.5, 0.5],
                    transform: Transform.identity
                });

                gridItem.idx = gridItems.length;

                gridItem.transformOutrs = transformOutArray[r];
                gridItem.transformOutcs = transformOutArray[c];
                gridItem.transformInrs = transformInArray[r];
                gridItem.transformIncs = transformInArray[c];

                gridItems.push(gridItem);
                cameraView.add(gridItem.mod).add(gridItem);
            }
        }
    }


    function transformOut(){
      console.log('transform out')
        for (var i = 0; i < gridItems.length; i+=1){
            var index = i;
            var gridItem = gridItems[index];

            var tran = Transform.translate(gridItem.transformOutrs, gridItem.transformOutcs);
            gridItem.mod.setTransform(tran, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }

    }

    function transformIn(){
        console.log('transform in');
        for (var j = 0; j < gridItems.length; j+=1){
            var index = j;
            var gridItem = gridItems[index];

            var tran = Transform.translate(gridItem.transformInrs, gridItem.transformIncs);
            gridItem.mod.setTransform(tran, {
                method: 'spring',
                dampingRatio: 0.5,
                period: 600
            });
        }


    }

    createGridItems();
    console.log (transformOutArray);
    console.log (transformInArray);
    transformOut();

    Engine.on('mousedown', transformIn);
    Engine.on('mouseup', transformOut);

});

define（'main'，函数（require，exports，module）{
var Engine=require（“著名/核心/引擎”）；
var View=require（‘著名/核心/视图’）；
var表面=要求（“著名/核心/表面”）；
var Modifier=require（‘著名/核心/修改人’）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var EventHandler=require（'著名的/core/EventHandler'）；
var physicengine=require（‘著名的／物理的／physicengine’）；
var Transitionable=require（‘著名的／转换的／可转换的’）；
var SpringTransition=require（“著名的/transitions/SpringTransition”）；
var Particle=require（“著名的/物理学的/物体的/粒子”）；
var Drag=require（‘著名/物理/力/阻力’）；
var排斥力=要求（“著名/物理/力/排斥”）；
var Wall=要求（“著名/物理/约束/墙”）；
var Random=require（“著名/数学/随机”）；
var Transform=require（‘著名/核心/转换’）；
registerMethod（'spring'，SpringTransition）；
var context=Engine.createContext（）；
var-cols=5；
var行=5；
var gridSize=Math.min（window.innerWidth，window.innerHeight）/1.5；
var itemSize=gridSize/（cols+1）；
var gridItems=[]；
var transformOutArray=[itemSize/2-gridSize/2，
（itemSize/2-gridSize/2）/2，
0,
（gridSize/2-itemSize/2）/2，
gridSize/2-itemSize/2]；
var transformInArray=Array.prototype.slice.call（transformOutArray）；
transformInArray.reverse（）；
var cameraView=新视图（）；
var-camera=新修改器({
来源：[0.5,0.5]，
对齐：[0.5,0.5]
});
context.add（摄像机）.add（摄像机视图）；
函数createGridItems（）{
对于（var r=0；r

将

转换设置回标识将使项目返回到转换时的默认值。当前，设置新变换后，它们将转换回原始状态，然后应用新变换。您只能使用新的变换来颠倒它们的顺序

函数transformIn（）{
log（'transform-in'）；
对于（var j=0；j

示例代码段：

define（'main'，函数（require，exports，module）{
var Engine=require（“著名/核心/引擎”）；
var View=require（‘著名/核心/视图’）；
var表面=要求（“著名/核心/表面”）；
var Modifier=require（‘著名/核心/修改人’）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var EventHandler=require（'著名的/core/EventHandler'）；
var physicengine=require（‘著名的／物理的／physicengine’）；
var Transitionable=require（‘著名的／转换的／可转换的’）；
var SpringTransition=require（“著名的/transitions/SpringTransition”）；
var Particle=require（“著名的/物理学的/物体的/粒子”）；
var Drag=require（‘著名/物理/力/阻力’）；
var排斥力=要求（“著名/物理/力/排斥”）；
var Wall=require（'