Открытая анимация занавеса на famo.us Scrollview

Question

Я пытаюсь создать открытую анимацию занавеса на Scrollview, поэтому, когда щелкнут элемент в Scrollview, он и элемент слева перемещаются влево, а все элементы после него переместитесь вправо. когда элемент снова щелкнут, занавес закрывается. Думая о том, чтобы сделать это, переместив элементы из Scrollview в 2 SequentialLayouts, и как только занавес закрывается, переместите их обратно в Scollview. Это можно сделать? Можете ли вы перемещать узлы/представления вокруг дерева рендеринга с одного узла на другой?

Любые другие подходы к проектированию, которые я должен рассмотреть?

Answer 1

Вот моя версия занавесок, которую вы описали. Трудно было точно знать, что вы хотели, но я принял удар.

define('main', function(require, exports, module) { 
 
    var Engine = require("famous/core/Engine"); 
 
    var Surface = require("famous/core/Surface"); 
 
    var RenderNode = require("famous/core/RenderNode"); 
 
    var Modifier = require("famous/core/Modifier"); 
 
    var Utility = require("famous/utilities/Utility"); 
 
    var Scrollview = require("famous/views/Scrollview"); 
 
    var Transitionable = require("famous/transitions/Transitionable"); 
 
    var SnapTransition = require("famous/transitions/SnapTransition"); 
 

 
    Transitionable.registerMethod('snap', SnapTransition); 
 

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

 
    var mainContext = Engine.createContext(); 
 

 
    var scrollview = new Scrollview({ 
 
    direction: Utility.Direction.X 
 
    }); 
 

 
    var views = []; 
 

 
    scrollview.sequenceFrom(views); 
 

 
    function _resize(index, views, event) { 
 
    console.log(index, event); 
 
    var itsMe = (index === event.index); 
 
    if (itsMe) { 
 
     this.trans.halt(); 
 
     if (this.open) 
 
     this.trans.set(100, snap); 
 
     else 
 
     this.trans.set(400, snap); 
 
     this.open = !this.open; 
 
     scrollview.goToPage(index); 
 
    } else { 
 
     if (event.isOpen) { 
 
     this.trans.halt(); 
 
     this.trans.set(100, snap); 
 
     } else { 
 
     this.trans.halt(); 
 
     this.trans.set(20, snap); 
 
     } 
 
     this.open = false; 
 
    } 
 

 
    } 
 

 
    function _resizeChosen(index, views, event) { 
 
    scrollview._eventOutput.emit('itemChosen', { 
 
     index: index, 
 
     isOpen: views[index].surface.open 
 
    }); 
 
    } 
 

 
    function _surfaceSize() { 
 
    return [this.trans.get(), undefined]; 
 
    } 
 

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

 
    var node = new RenderNode(); 
 

 
    node.surface = new Surface({ 
 
     content: (i + 1), 
 
     size: [undefined, undefined], 
 
     properties: { 
 
     backgroundColor: "hsl(" + (i * 360/20) + ", 90%, 50%)", 
 
     lineHeight: "50px", 
 
     textAlign: "center" 
 
     } 
 
    }); 
 

 
    node.surface._index = i; 
 

 
    node.surface.open = false; 
 

 
    node.surface.state = new Modifier(); 
 

 
    node.surface.trans = new Transitionable(50); 
 

 
    node.surface.state.sizeFrom(_surfaceSize.bind(node.surface)); 
 

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

 
    node.surface.pipe(scrollview); 
 
    node.surface._eventOutput.subscribe(scrollview._eventOutput); 
 

 
    node.surface.on('click', _resizeChosen.bind(node.surface, i, views)); 
 

 
    node.surface.on('itemChosen', _resize.bind(node.surface, i, views)); 
 

 
    views.push(node); 
 
    } 
 

 
    mainContext.add(scrollview); 
 
}); 
 
require(['main']);

<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>