React --- CSSアニメーションの終了を感知して次のイベントを発生させたい

回転するCSSアニメーションが終了し次第、モーダルのアニメーションを始動させたいと思っています。しかし、現状のコードでは同時にアニメーションが起こってしまいます。

コード

javascript
1class App extends Component {
2    state = {
3      isOpen: false,
4      isAnimated : false,
5    };
6    onOpenModal = () => {
7      this.setState({ isAnimated: true });
8      this.setState({ isOpen: true });
9    };
10
11    render() {
12        return(
13          <div className="wrapper">
14            <div className="container">
15              <div className="center-align">
16                <img src={img3} alt="" className={this.state.isAnimated ? "anime-a" : ""} />
17              </div>
18              <div className="center-align">
19                <button onClick={this.onOpenModal}>クリック</button>
20              </div>
21            </div>
22          </div>
23          
24        );
25    }
26
27}
28

css
1.anime-a {
2  animation:rotateAnimation 1s;
3}
4
5@keyframes rotateAnimation {
6  0% {
7    transform: rotate(0deg);
8  }
9  100% {
10    transform: rotate(180deg);
11  }
12}

クリックするとonOpenModal関数が動くようになります。その中で、画像の回転アニメーションが起こり、その後にモーダルが開くという形を実装したいです。しかし、これだと同じタイミングでアニメーションが起きてしまいます。回転アニメーション終了のタイミングで次のアニメーションを起こすにはどうすれば良いでしょうか。もっと言うと、アニメーション終了のタイミングでsetState({isOpen: true})にしたいです。良い方法があれば教えてください。

試したこと

###addEventListenerを使ってみました。

javascript
1   onOpenModal = () => {
2      var el = document.querySelector('.anime-a');
3      this.setState({ isAnimated: true });
4      el.addEventListener('animationed', function() {
5        this.setState({ open: true });
6      });
7    }

これでうまくいくはず！と思ったんですが、

Unhandled Rejection (TypeError): Cannot read property 'addEventListener' of null

というエラーが出てしまいました。おそらくDOMの問題だと思います。この方法ではReactにおいてCSSアニメーションを制御できない。

onAnimationEndを使ってみた

javascript
1   onOpenModal = () => {
2      // this.setState({ isAnimated: true });
3      this.setState({ open: true });
4    }
5
6   onImageRotate = () => {
7      this.setState({ isAnimated: true });
8    }
9
10// 略
11<button onClick={this.onImageRotate} onAnimationEnd={this.onOpenModal}>クリック</button>

しかし、これではなぜかonAnimationEndの方が動かずモーダルが出てきません。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは
以下のように、修正してみるといかがでしょうか？

修正前

javascript
1onOpenModal = () => {
2  this.setState({ isAnimated: true });
3  this.setState({ isOpen: true });
4};

修正後

以下のように、isOpenを true にする setOpen メソッドを追加して、これを（CSSアニメーションと同じ時間の）1秒待ってから開始するようにします。

javascript
1setOpen = () => this.setState({ isOpen: true });
2
3onOpenModal = () => {
4  this.setState({ isAnimated: true });
5  setTimeout(this.setOpen, 1000);
6};