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

过滤项CSS网格位置重新调整动画

1 个答案: