Question

当前，我有一个刮板，用于刮除松弛消息并将其存储在某个地方的数据库中。

在前端，我每秒都在拉动以查看是否弹出新消息。然后，我在屏幕上呈现这些消息。

如果闲散的人在邮件中回复或表达了情感，则该邮件将从后端删除，因此也将从前端删除。

我现在想做的是，当某个项目被删除时，我想以某种方式对其进行动画处理。

这是我当前的一些代码：

async componentDidMount() {

        await this.grab_channels()
        await this.grab_slack_user_data()
        await this.grab_items()

        setInterval(() => {
            this.grab_items()
        }, this.state.settings.seconds_per_slack_messages_pull * 1000 )
    }

grab_items() {

        let url = this.state.settings.api_url + 'channel/' + this.state.selected_channel + '/now'

        return new Promise( resolve => {
            axios.get( url )
                .then( res => {
                    this.setState( { items: res.data } )
                    resolve()
                } )
        })

    }

最后，项目被渲染：

this.props.items.map( t => { 
                        return (
                            <Item 
                                key={ t.usr + '_' + t.ts } 
                                task={ t } 
                                user={ this.props.slack_users[ t.usr ] } 
                                settings={ this.props.settings } 
                                now={  this.state.now } 
                                /> 
                        )
                    } )

我当时正在考虑在grab_items()内进行某种检查，但是在那之后我不知道如何继续。确定要渲染的内容很容易，但问题实际上出在此。

任何人都具有构建类似这样的东西的经验吗？

谢谢！

Answer 1

使用过渡组是执行此操作的一种方法： https://github.com/reactjs/react-transition-group

看看这个例子： https://reactcommunity.org/react-transition-group/transition-group

Answer 2

对于功能中的check部分catch_items

   /* include "clone" so that we don't modify state directly */
    import clone from 'clone'

      grab_items() {
        let url = this.state.settings.api_url + 'channel/' + this.state.selected_channel + '/now'

        return new Promise(resolve => {
          axios.get(url).then(res => {
            /* figure out what items to remove before you set the state */
            let itemsToShow = []
            for (let i = 0; i < this.state.items.length; i++) {
              let ifFound = false
              let t = clone(this.state.items[i])
              for (let j = 0; j < res.data.length; j++) {
                if (t.key === res.data[j].key) {
                  ifFound = true
                }
              }
              /* if ifFound is false, it means it is not in the messages any more. */
              if(!ifFound){
                t.haveAnimation = true
                itemsToShow.push(t)
              }
              itemsToShow = itemsToShow.concat(res.data)
              this.setState(itemsToShow)
            }
          })
        })
      }

然后每秒重新拉动数据时，您将有一个要显示的项目列表。列表中的项目需要具有“消失”动画，还需要新的消息。

要使动画生效，请在渲染部分：

  this.props.items.map(t => {
    return (
      <Item
        key={t.usr + '_' + t.ts}
        className={t.haveAnimation ? 'animationCSS' : ''}
        task={t}
        user={this.props.slack_users[t.usr]}
        settings={this.props.settings}
        now={this.state.now}
      />
    )
  }

以上代码应将CSS类附加到Item。您可以在类中放置任何CSS动画

我如何渲染/动画离开数组的项目

2 个答案: