时间戳

首页 > 解决方案 > 过滤项目 CSS 网格位置重新调整动画

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

问题描述

我有一个反应应用程序，可以过滤 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>

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

标签： cssreactjscss-grid

解决方案

我制作了一个动态控制组件动画的包。基本上，它使您能够对组件的移动（以及更多）从一个位置渲染到另一个位置进行动画处理。组件的主要思想是你给它一个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

推荐阅读