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

Transition other posts when new post inserted/deleted

本文关键字：转换 其他 删除 新帖 插入      更新时间：2023-09-26

我有一个#each块渲染的帖子列表，如下所示

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

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

是否有办法接管这个重新定位的过渡，让旧的元素滑出的方式，新的帖子淡入，并为较低的帖子向上滑动，以采取删除的帖子的空间，因为它淡出?

当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由Web Tempest提供。

使用_uihooks是从页面中移动/添加/删除数据的动画很好的选择。你也可以查看动量包

在你的应用程序中运行这个

 meteor add percolate:momentum

，然后在{{#with}}或{{#each}}的模板中使用它，使用内置的辅助工具，其中一个插件{{#momentum plugin="slide-height"}}

相关文章：