替换绑定数组中的项目会在没有它的情况下短暂呈现它

Question

我有一个包含艺术品图像的播放列表。当我单击一个时，旧的当前曲目正在取代它们。因此我替换了数组中的项目。

当 Ember 在很短的时间内重新渲染项目时，被替换的元素会消失。这会导致一切都重新定位的丑陋效果。

你可以在这里看到效果

• 转到http://ali.dj/blog
• 单击三个播放列表图像之一

这是我的简化控制器：

import Ember from 'ember';

export default Ember.ArrayController.extend({

  playlist: null,
  currentTrack: null;
  actions: {
    replaceItem: function(){
      playlist.replace(index, 1, [self.get("currentTrack")])
    } 
  }
}

这是模板：

{{#each song in playlist}}
  <div class="song" {{action "changeTrack" song}}>
    <img {{bind-attr src=song.artwork_url}} />
  </div>
{{/each}}

编辑：我创建了一个 JSFiddle，但 NOT 可以用普通的 jQuery http://jsfiddle.net/bhn8bko1/2/

重现我的问题

Answer 1

看起来选定的播放列表正在移动，然后在显示为当前播放列表之前逐渐变透明。因为它淡出你仍然可以通过它看到旧的播放列表，然后快速看到它切换。如果您将新的播放列表缩小到它开始时的大小而不是淡出到透明，您将看不到跳跃。它会在保持不透明的同时缩小尺寸，然后在幕后进行切换。

旧的播放列表仍会在右侧“跳转出现”，但可能会通过淡入来软化。