React / React Spring List Animate Out不起作用

时间:2018-08-12 22:11:29

标签: reactjs react-spring

我正在尝试react-spring,尝试使用<Transition>组件将动画应用于已安装/卸载的组件列表。动画会在安装时按预期发生,但在卸载时根本不会发生-移除的组件似乎会立即卸载而没有动画。

我怀疑我误解了keys的工作方式,因为这似乎是我的代码与示例之间唯一的不同之处–我在数组的每个对象中使用id属性。我的假设是,它与用于组件列表的React内置key相同,只是一次全部通过。我尝试使用Transition的{​​{1}}参数传递数据数组并将items设置为函数,但是它只是以不同的方式发生故障。

我在这里设置了一个简单的演示,在其中创建了一个列表,并设置了超时时间,以便在3秒后删除第一个项目。代码如下:

key

我将其运行在以下的CodeSandbox上:https://codesandbox.io/s/r5n8v3x85q

我想念什么吗?

1 个答案:

答案 0 :(得分:0)

我使用以下代码进行处理。您缺少“过渡”组件上的“离开”属性。您也可以在“过渡”组件中为属性传递“过渡”,这将使您的动画看起来更漂亮。

    public class AlarmReceiver extends BroadcastReceiver {

      @Override
      public void onReceive(Context context, Intent intent) {
       // MY auto sms method.....
      }
    }