React Transition Groupで要素がアニメーションされない

Question

前提

要素が直線的に移動するアニメーションをReactで作ろうとしています。
画面全体に広がっているdiv.lineanimをクリックすると、その上を、Blockと書かれた100x100pxの箱が左から右に流れるようにしたいです。
アニメーションライブラリはReactTransitionGroupです。TransitionとCSSTransitionがありますが、InlineCSSを使いたいのでTransitionの方を使っています。

発生している問題

しかし、現状ではクリックしても要素がアニメーションされません。onEnteredのタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移やthis.state.showの更新はうまくいっているようなのですが...
onEntering→onEnteredの遷移の間隔はちゃんとthis.durationで指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、onEnteredに到達した瞬間に表示位置が変わるという感じです。

解決につながる方法をご存知でしたら教えていただきたいです。
よろしくお願いします。

該当コード

import React, { Component } from 'react'
import '../css/lineanim.css'
import { Transition } from 'react-transition-group';


class LineAnim extends Component {
    constructor(props) {
        super(props)
        this.duration = 1000
        this.state = {
            show: false
        }
    }


    defaultStyle = {
        transition: `transform ${this.duration}ms linear`,
        opacity: 1,
        backgroundColor: 'red',
        width: '100px',
        height: '100px',
        transform: `translateX(0px)`,
    }

    transitionStyles = {
        entering: { opacity: 1 },
        entered: { opacity: 1, transform: `translateX(90vw)` },
        exiting: { opacity: 1 },
        exited: { opacity: 1 },
    };


    setShow = (value) => {
        this.setState({ show: value })
    }

    callBacks = {
        onEnter: () => console.log("onEnter"),
        onEntering: () => console.log("onEntering"),
        onEntered: () => this.onEntered(),
        onExit: () => console.log("onExit"),
        onExiting: () => console.log("onExiting"),
        onExited: () => console.log("onExited")
    };
    onEntered = () => {
        console.log("onEntered")
    }

    render() {
        return (
            <div className="lineanim"
                onClick={() => this.setShow(true)}
            >
                <Transition
                    in={this.state.show}
                    timeout={{
                        appear: 0,
                        enter: this.duration,
                        exit: 0,
                    }}
                    exit={false}
                    {...this.callBacks}
                >
                    {state => (
                        <div
                            style={{
                                ...this.defaultStyle,
                                ...this.transitionStyles[state]
                            }}
                        >
                            Block
                        </div>
                    )}
                </Transition>
            </div>
        )
    }
}
export default LineAnim

lineanim.css

.lineanim {
    background-color :"gray";
    height:100vh;
    width:100%;
}

Answer 1

アニメーションの発火するタイミングを勘違いしていました。