过滤项目CSS网格位置重新调整动画[重复]

Question

我有一个 react 应用程序，可以过滤 CSS 网格布局中的一堆项目。

当未过滤时，网格包含所有项目。

<div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
<div>

应用过滤后，项目网格会变小

<div>
  <div class="product"></div>
  <div class="product"></div>
<div>

如果另一个过滤器被删除，可能会有更多。

<div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
<div>

当网格项消失或重新出现时，如何为网格项应用过渡动画以滑动到位？

Answer 1

我制作了一个动态控制组件动画的包。基本上，它使您能够动画组件运动（和更多）从一个地方渲染到另一个地方。组件的主要思想是你给它一个singularKey和一个singularPriority，当一个组件被渲染服务时间（组件由singularKey标识）它只会渲染具有最高singularPriority的实例并从最后渲染的实例位置开始动画和尺寸。对于像您这样的情况，用例非常相似，但您只需要在一个地方渲染组件，我添加了一个 animationTrigger 道具，当​​更改时会导致组件从其先前状态开始动画。

这是包裹：https://www.npmjs.com/package/react-singular-component

示例如下：https://dor6.github.io/react-singular-component/

查看列表示例，它与您的情况非常相似。您可以将项目添加到列表顶部或删除列表中任何位置的项目。我将项目索引用作animationTrigger，并且只要项目索引发生更改，项目就会进行动画处理。

你也可以看看github上的列表示例代码：https://github.com/dor6/react-singular-component/blob/master/examples/src/listExample.js