Question

我有一个使用#each块呈现的帖子列表，如下所示

{{#each posts}}
    {{> post}}
{{/each}}

当我从集合中插入和删除文档时，同样会修改DOM，其他帖子会立即进入新位置。

有没有办法接受这种重新定位的转换，让旧元素滑出以使新帖子淡入，并使较低的帖子向上滑动以占用已删除帖子的空间淡出？

Answer 1

当Blaze更改DOM时，您可以使用_uihooks来实现转换。可以使用以下钩子：

var hooks = {
  insertElement: function(node, next) {
    // called when Blaze intends to insert the DOM element node before the element next
  },
  moveElement: function(node, next) {
    // called when Blaze intends to move the DOM element node before the element next
  },
  removeElement: function(node) {
    // called when Blaze intends to remove the DOM element node
  }
}

以下是一些示例：benstr/Meteor_uihooks，tmeasday/transition-helper和Meteor JS Animation article provided by Web Tempest。

Answer 2

使用_uihooks是一个很好的选项，用于对页面中移动/添加/删除的数据进行动画制作。您还可以查看ftp://ftp.letters.com/file[a-z].txt

只需在你的应用程序中运行它

 meteor add percolate:momentum

然后在{{#with}}或{{#each}}中的模板中使用内置帮助程序与其中一个插件{{#momentum plugin="slide-height"}}

一起使用

插入/删除新帖子时转换其他帖子

2 个答案: