Question

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

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

生成的Surface 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中的所有曲面都具有相同的类属性。因此，如果我点击第一个表面，我如何告诉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

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

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

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

Answer 2

更新：请参阅@ 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()。需要找到执行相同任务的原生 Famo.us方式。

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

2 个答案: