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

【问题标题】：Temporarily add a CSS class to a DOM element with Ember.js使用 Ember.js 临时将 CSS 类添加到 DOM 元素
【发布时间】：2014-04-11 09:26:05
【问题描述】：

背景信息：

我正在使用 Ember.js。

这是我的视图代码：

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

还有我的把手代码：

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

当我将物品放在上面时，它会说“谢谢”并变成蓝色。太棒了。

目标：

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

问题：

如何在 Ember.js 中进行操作（将类应用于元素、更改元素的文本等）超时限制？

【问题讨论】：

didInsertElement 挂钩可能是解决方案。 here 是一篇有用的文章。你可以在 afterRenderEvent 中执行一个 jQuery 函数。
另一种解决方案是Ember.run.debounce，可用于在指定时间后执行代码。

标签： javascript jquery animation ember.js timeout

【解决方案1】：

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

在视图中，您可以使用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，您可以像往常一样使用选择器访问它；请记住它从视图的元素作为根节点开始。例如this.$('#myNestedButton')

【讨论】：