Question

背景信息：

我正在使用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');
   }
 });

我的Handlebars代码：

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

当我放下一个项目时，它会说“谢谢”并变成蓝色。精彩。

目的：

我想做的是将“谢谢”和蓝色保持几秒钟，然后淡出回到页面加载上显示的常规颜色和消息。我无法在Ember.js中找到这样做的例子，我尝试使用常规jQuery方法似乎不起作用。

问题：

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

Answer 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')

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

背景信息：

目的：

问题：

1 个答案: