Famo.us 如何 select scrollView 中未被点击的表面？

Question

我有一个包含 5 个表面的 scrollView。如果我点击一个表面，我希望其他表面要么淡出，z-indexed 远远落后或平移出屏幕。问题是，我不知道如何实现其他表面的选择。

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>

scrollView 中的所有表面都具有相同的 class 属性。因此，如果我单击第一个表面，我如何告诉 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

更新：请参阅@obsidian06 给出的答案以获得正确的解决方案。

现在，我将使用 Underscore 的 each() 块，该块在单击事件时为表面的不透明度设置动画。

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

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

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

Answer 2

您可以直接使用滚动视图的后备数组。

surfaces

到达此处后，您将可以访问表面数组中的节点。从那里开始，这是一个从数组中排除作为 this 返回的表面并与您放置在表面对象上的属性交互的问题，您可以使用下划线。

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

你应该避免使用兄弟姐妹关系的直觉是正确的。此外，我敢打赌，如果您尝试完全操纵您的布局，您将来会运行遇到同样严重的错误。你应该尽可能坚持你的 famo.us 对象。

Famo.us 如何 select scrollView 中未被点击的表面？

Famo.us how to select the surfaces in a scrollView that were not clicked on?

famo.us