jquery - 替换绑定(bind)数组中的元素会在没有它的情况下短暂呈现它

Question

我有一个包含艺术品图像的播放列表。当我点击其中一个时，旧的当前轨道将取代它们。因此我替换了数组中的元素。

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

这里可以看到效果

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

这是我简化的 Controller :

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，但不能用纯 jQuery 重现我的问题 http://jsfiddle.net/bhn8bko1/2/

Answer 1

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

旧的播放列表仍会“跳转”出现在右侧，但这可能会随着淡入而减弱。