在响应中加载iframe时发生过渡

Question

我正在使用Spotify API创建一个小项目。我正在使用URI并将其插入到iframe中。加载需要一段时间，我想知道是否有一种方法可以创建在iframe加载到React中时开始的过渡效果。这是我使用iframe的组件之一。我不确定在加载CSS过渡时如何激活它，请先感谢！

import React, { Component } from "react";
import { connect } from "react-redux";
import { addToProfile } from "../../ducks/reducers/reducer";
import "./Chart.css";

import { Form, TextArea, Button, Icon, Loader } from "semantic-ui-react";

class Chart extends Component {
  state = {
    comment: ""
  };

  commentHandler = e => {
    this.setState({ comment: e.target.value });
  };

  render() {
    const { uri } = this.props;
    const userID = this.props.user.user_id;

    return (
      <div className="chart">
        <Loader
          style={{
            position: "absolute",
            zIndex: 0,
            left: 0,
            right: 0,
            top: 20
          }}
          active
          inline="centered"
        />
        <iframe
          title="spotify"
          src={`https://embed.spotify.com/?uri=${uri}`}
          frameBorder="0"
          height="80"
        />

        <div className="toggle">
          <Form>
            <TextArea
              onChange={event => this.commentHandler(event)}
              value={this.state.comment}
              placeholder="Why do you like this?"
              style={{
                height: "100%",
                backgroundColor: "#fff"
              }}
            />
          </Form>
          <Button
            style={{ marginLeft: "5px" }}
            onClick={() =>
              this.props.addToProfile({
                uri,
                userID,
                comment: this.state.comment
              })
            }
            animated
          >
            <Button.Content visible>Add</Button.Content>
            <Button.Content hidden>
              <Icon name="add" />
            </Button.Content>
          </Button>
        </div>
      </div>
    );
  }
}

export default connect(
  state => state,
  { addToProfile }
)(Chart);