Question

我相信多次问过类似的问题，并且有一些文章描述了如何解决该问题。我发现的解决方案对我不起作用，我想知道我是否缺少基本的东西。

我有一个从后端服务器接收一系列日志的组件（每当单击某些按钮时就会发生这种情况）。我要显示的是一个仅在最新日志上播放的小动画，以显示该日志刚刚出现。

我的第一个尝试是使用CSS：动画，它确实起作用了，但是仅当我刷新页面时才起作用。我发现其中一篇文章说这是React的工作方式。有人解决方案建议从标签/组件中删除带有动画的类名，但这没有用。结果是完全一样的，动画只播放一次，然后什么也不播放。

第二次尝试时，我尝试使用react-animations npm包，希望它具有一些内置的逻辑来处理该问题，而React不会在不刷新页面的情况下重播相同的动画。结果相同，动画只播放一次。

最后，我使用了react-transition-group npm程序包，该程序包可以解决问题，但是它也不起作用（我想知道我是否真的在这里遗漏了什么，以及如何实现）。同样，动画只播放一次，然后在不刷新页面的情况下出现新日志时就不播放。

以下是代码：（在renderLogs()中，数组的第一个元素具有styles.jello样式，即动画

import React, { Component } from 'react'
import { Container, Row } from 'react-grid-system'
import { Card, CardHeader, CardBody } from 'reactstrap'
import { bounce, jello } from 'react-animations'
import { StyleSheet, css } from 'aphrodite'
import { CSSTransition } from 'react-transition-group'

export default class Logger extends Component {
    constructor(props) {
        super(props)
        this.state = {
            logs: []
        }
    }

    componentWillReceiveProps = (nextProps) => {
        this.setState({
            logs: nextProps.logs
        })
    }

    renderLogs = () => {
        return this.state.logs.map((x, i) => i === 0 ? (
            <CSSTransition timeout={500}>
                <p className={css(styles.jello, styles.pItalic)}>{x}</p>
            </CSSTransition>
        ) : <p className={css(styles.pItalic)}>{x}</p>)
    }

    render() {
        return (
            <Container>
                <Row>
                    <Card className={css(styles.cardMain)}>
                        <CardHeader className={css(styles.amrcGradient, styles.whiteFont)}>
                            Logs
                    </CardHeader>
                        <CardBody className={css(styles.cardBody)}>
                            {this.renderLogs()}
                        </CardBody>
                    </Card>
                </Row>
            </Container>
        )
    }
}

const styles = StyleSheet.create({
    bounce: {
        animationName: bounce,
        animationDuration: '1s'
    },
    jello: {
        animationName: jello,
        animationDuration: '1s'
    },
    amrcGradient: {
        backgroundImage: 'linear-gradient(to right,#0053a1 0,#0099df 100%)',
        width: '100%'
    },
    whiteFont: {
        color: `white`
    },
    cardMain: {
        width: '100%',
        backgroundColor: '#ededed'
    },
    cardBody: {
        padding: '2px',
        maxHeght: '170px',
        overflow: 'auto'
    },
    pItalic: {
        fontStyle: 'italic'
    }
})

有任何帮助！

反应-动画不会在状态更改时播放

0 个答案: