如何使用React.js为图标切换设置动画？

Question

我有这个组件（小的，可测试的）组件，用于切换Font Awesome图标。

import React, { Component } from 'react';

class IconToggler extends Component {
    constructor(props){
        super(props);
        this.state = {
            icon: "fa fa-play fa-5x"
        };
        this.toggleIcon = this.toggleIcon.bind(this);
    }

    toggleIcon(){
        const newIcon = this.state.icon === "fa fa-play fa-5x"? "fa fa-pause fa-5x" : "fa fa-play fa-5x";
        this.setState({icon: newIcon});
    }
    render() {
        return (
            <div className="header">
                <button onClick={this.toggleIcon}><i className={this.state.icon}></i></button>
            </div>
        );
    }
}

export default IconToggler;

它正在工作，但图标切换感觉很粗糙。如何让一个淡出，另一个淡出？