Famo.us如何选择未被点击的scrollView中的曲面？

Question

我有一个包含5个曲面的scrollView。如果我点击某个曲面，我希望其他曲面可以淡出，Z-索引远远落后或翻译出屏幕。问题是，我不知道如何实现其他曲面的选择。

Famo.us代码：

Famous.Engine = famous.core.Engine; 
Famous.Surface = famous.core.Surface; 
Famous.RenderNode = famous.core.RenderNode; 
Famous.Transform = famous.core.Transform; 
Famous.Modifier = famous.core.Modifier; 
Famous.EventHandler = famous.core.EventHandler; 

Famous.ContainerSurface = famous.surfaces.ContainerSurface; 

Famous.ScrollView = famous.views.Scrollview; 

Famous.Transitionable = famous.transitions.Transitionable; 
Famous.SnapTransition = famous.transitions.SnapTransition; 
Famous.Easing = famous.transitions.Easing; 
Famous.TransitionableTransform = famous.transitions.TransitionableTransform; 

Famous.StateModifier = famous.modifiers.StateModifier; 

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


var scrollView = new Famous.ScrollView({ 
    direction: 0 
}); 

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

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

var surfaces = []; 

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

    var surface = new Famous.Surface({ 
     size: [undefined, undefined], 
     properties: { 
      backgroundColor: "#fff", // "hsl(" + (i * 360/40) + ", 100%, 50%)", 
      textAlign: "center" 
     } 
    }); 


     surface.open = false; 

     surface.state = new Famous.Modifier(); 

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

     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(scrollView); 

     surface.on('click',function(event){ 
      if (this.open) { 
        this.trans.halt(); 
        this.trans.set(500, snap); 
        /* place code to reverse the animation that placed the other surfaces off-screen here */ 
       } else { 
        this.trans.halt(); 
        this.trans.set($(window).width(), snap); 
        /* how to implement the selection of the other surfaces that were not clicked */ 
       } 
       this.open = !this.open; 

     }.bind(surface)); 

     surfaces.push(surface.node); 
     // sequenceFrom method sets the collection of renderables under the Scrollview instance's control. You can pass array of items or ViewSequence object. 
     scrollView.sequenceFrom(surfaces); 
} 

mainContext.add(scrollView);  

一例表面HTML生成：

<div class="famous-surface" style="background-color: rgb(255, 255, 255); text-align: center; width: 500px; height: 662px; opacity: 0.999999; transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"> 
    <div class="surface-content-wrapper"> 
    <div class="container-fluid"> 
     <section class="row project-preview"> 
     <article class="col-lg-12"> 
      <img class="img-responsive" src="/images/project_name_header.png"> 
      <h1>A Surface</h1> 
      <div class="project-stats"> 
     </article> 
     </section> 
    </div> 
    </div> 
</div> 

中的所有滚动视图的表面具有相同的类的属性。所以如果我点击第一个表面，我该如何告诉famo.us对其余四个表面做些什么？

当我点击特定表面上this和event.currentTarget控制台日志：

this: Surface { _matrix=[16], _opacity=1, _origin=[2], more...} 
project...875d127 (line 116) 

event: <div class="famous-surface" style="background-color: rgb(255, 255, 255); text-align: center; width: 500px; height: 662px; opacity: 0.999999; transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"> 

Answer 1

您可以直接使用scrollview的支持数组。

surfaces 

一旦你到达这里，你将有权访问你的surfaces数组中的节点。从那里开始，这是一个排除从数组中返回的这个的表面，并与放置在表面对象上的属性进行交互的问题，您可以使用下划线执行此操作。

_(surfaces).each(function(node) { 
    surface = node._child; 
    if (surface != clickedSurface) { 
    //Do whatever you want to do to the node or surfaces 
    } 
}); 

你的本能，你应该避免使用兄弟姐妹关系是正确的。此外，我敢打赌，如果你试图操纵你的布局，你将来会遇到同样令人讨厌的bug。你应该尽可能地坚持你的famo.us对象。

Answer 2

更新：请看到@ obsidian06为妥善解决给出答案。

现在，我将与Underderscore的each()块一起使用，该块用于为点击事件上的曲面不透明度设置动画。

var $otherSurfacesNotClicked = $(event.currentTarget).siblings(); 

_.each($otherSurfacesNotClicked, function(surface){ 
    console.log("surface in each loop: ", surface); 
    $(surface).animate({opacity: 0}); 
}); 

移动设备性能受到影响。最有可能的问题是使用jQuery animate()。需要找到原生 Famo.us执行相同任务的方式。