反应-更改可见性状态后的过渡效果

Question

我不确定它是响应还是CSS问题，我做了Navbar，它在经过一些滚动后变得固定了，我希望使其平滑显示，因此我想添加一些过渡效果，但是它不起作用。奇怪的是，transitionDelay有效，但是transitionDuration有效，不是真的，我试图在css以及React组件中的内联样式中更改它

constructor(props) {
        super(props)
        this.state = {
            scrollPositionY: 0,
            visibility: 'hidden'
        }
    }

    componentDidMount() {
        return window.addEventListener('scroll', this.handleScroll)
    }

    componentWillUnmount() {
        return window.removeEventListener('scroll', this.handleScroll)
    }

    handleScroll = () => {
        const scrollPositionY = +window.scrollY;
        if (scrollPositionY >= 660) {
            this.setState({
                scrollPositionY,
                visibility:'visible'
            });
        } else if (scrollPositionY < 660) {
            this.setState({
                scrollPositionY,
                visibility:'hidden'
            })
        }
    }

    render() {


        return (
            <div style={{visibility:this.state.visibility}}>
                <MenuList/>
            </div>
        );

CSS

.navbar-default {
  background-color: gray;
  border-color: transparent;
  position: fixed;
  z-index: 1;
  padding: 10px;
  width: 100%;
  transition: 5s ease-in;
}