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

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

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

旧的播放列表仍会 'jump-appear' 在右侧，但可能会随着淡入而减弱。

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

Replacing item in bound array renders it briefly without it

html

css

jquery

ember.js