javascript - 使用 Ember.js 临时将 CSS 类添加到 DOM 元素

Question

背景信息:

我正在使用 Ember.js。

这是我的 View 代码:

App.AddView = Ember.View.extend({
  classNameBindings: ['enter:enter:leave', 'dropped:dropped:leave'],
  enter: false,
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();
     this.set('dropped', 'true');
     this.set('text', 'Thanks');
   }
 });

还有我的 Handlebars 代码:

<script type="text/x-handlebars" id="add">
  {{#view App.AddView id="drop"}}
      {{msg}}
  {{/view}}
</script>

当我把一个元素放在上面时，它会说“谢谢”并变成蓝色。太棒了。

目标:

我想做的是将“谢谢”和蓝色保留几秒钟，然后淡出回页面加载时显示的常规颜色和消息。我在 Ember.js 中找不到执行此操作的示例，并且我所有尝试仅使用常规 jQuery 方式执行操作的尝试似乎都不起作用。

问题:

如何在 Ember.js 中使操作(将类应用于元素、更改元素的文本等)设置为超时？

Answer 1

类绑定(bind)将在绑定(bind)满足条件时发生。为了实现延迟/动画效果，您必须使用 CSS3 动画(关键帧动画可能有效)或使用 JQuery。使用 JQuery 进行动画和其他复杂的 DOM 操作没有任何问题。

在 View 中，您可以使用 this.$() 方法访问限定范围的 JQuery 对象。您可以执行如下操作:

App.AddView = Ember.View.extend({  
   classNames: ['defaultState'],
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();

     this.$().animate({ backgroundColor: "#7cc9ea"}, 400);
     this.set('text', 'Thanks');

     Ember.run.later(this, function(){
       this.$().animate({ backgroundColor: "#FFFFFF"}, 400);
       this.set('text', '');
     }, 500);
   }
 });

为了使背景颜色具有动画效果，您将需要 jquery-color 插件。希望这可以帮助! :)

编辑:如果您想要设置背景动画或以其他方式操作嵌套元素的 DOM，您可以像平常一样使用选择器访问它；只需记住它从 View 的元素作为根节点开始。例如this.$('#myNestedButton')