How to animate changing text in paragraph?-CodePudding

I have component which shows text message in <p></p> according to specific condition:

const StatusBar = ({ currentPlayer }) => {
    return (
        <div className="status-bar-container">
            <p>
                {currentPlayer?.color === Colors.BLACK
                    ? "⚫️ Black player's turn"
                    : "⚪️ White player's turn"}
            </p>
        </div>
    )
}

Is it possible to animate transition between first ('Black player's turn') and second ('White player's turn') messages using CSS/SCSS or some react animation libs?

CodePudding user response：

I did not come up with an idea how to animate it properly in this configuration but I've made a small change and now I am pretty ok with what's happening on screen:

const StatusBar = ({ currentPlayer }) => {
    return (
        <div className="status-bar-container">
            {currentPlayer?.color === Colors.BLACK ? (
                <p>⚫️ Black player's turn</p>
            ) : (
                <p>⚪️ White player's turn</p>
            )}
        </div>
    )
}

If you make it this way React will only rerender the difference between ⚫️ Black player's turn and ⚪️ White player's turn which is only the first part (⚫️ Black and ⚪️ White).

This looks much smoother than rendering the whole message all over again.