1

我fadeTo在 Ember 部分模板中的链接上有一个动画；该动画在鼠标点击链接时被激活，它是这样完成的：

jQuery('#object').fadeTo(1000, 1);

所以需要1秒才能完成；问题是，如果我将鼠标移到部分模板区域之外，在动画完成之前，它就会停止；例如，如果我单击链接，动画开始并且对象开始淡入，但是如果我在 1 秒过去之前将鼠标移出部分模板区域，则对象将不会完全可见，但其不透明度将保持不变小于 1；

执行fadeTo代码的函数didInsertedElement在实际视图中被调用......有人知道即使用户将鼠标移到部分模板区域之外，我怎么能有一个一旦启动就会完成的动画？

4

1 回答 1

5

几件事：

  1. 单击链接会给我一个 404，如果没有更多代码，很难获得上下文

  2. 您是否正确使用 Ember 事件处理？您提到fadeTo代码在didInsertElement函数中，在处理单击事件时听起来不正确。 didInsertElement是在渲染（或重新渲染）元素后调用的回调。

鉴于描述，听起来您有两个选择。这两种方法都不应该依赖于光标位置。

选项1

如果您的模板足够简单，您可以绑定到视图中的点击事件，那就去吧。这样，您不必指定任何选择器（例如，#object）。

在您的模板中，您应该只有一个标准链接：

    <a href="#"> link text </a>

现在，在您的视图中处理事件

    App.FooView = Ember.View.extend({

      click: function(e) {
        $(e.target).fadeTo(1000, 1);
        return false;  // prevent page transition
      }

    });

选项 2

直接绑定到链接，并在控制器中处理事件。

在您的模板中，向链接添加一个操作：

    <a href="#" id="object" {{action "fade"}}> link text </a>

现在，使用元素 id在控制器中处理事件：

    App.FooController = Ember.ObjectController.extend({

      actions: {
        fade: function() {
          $('#object').fadeTo(1000, 1);
        }
      }

   });

如果我离这里很远，请为我们提供一些代码。谢谢。

于 2014-01-21T03:13:26.310 回答