Javascript 反应CSSTransitionGroup不设置高度、宽度或顶部动画

我想让导航条在滚动条上上下滑动。很简单。我没问题。但其他的都不行。对于其他任何内容，导航栏只是出现和消失，没有动画

我试过很多不同的方法。需要添加

component='div'

才能使不透明度发挥作用。我浏览了很多动画库，却发现它们不起作用。真的是好几天了。我完全不知道下一步该怎么办。也许这是CSS中的一些东西

任何帮助都将不胜感激

组件：

return (
<div>
    <CSSTransitionGroup component='div' transitionName="example" transitionEnterTimeout={500}transitionLeaveTimeout={300}>
        { this.state.visible ?

            <div key='nav-container' className='pure-g nav-container' style={containerStyle} >
                    <div className='pure-u-1-24' />
                    <div className='pure-u-10-24 logo'>
                        <img style={logoStyle} src={'https://s3.amazonaws.com/philandrews/header-logo.svg'} alt='Phil Andrews Logo' />
                    </div>
                    <div className='pure-u-12-24'>
                        <Link style={linkStyle} to={'/blog'}>
                            BLOG
                        </Link>
                        <Link style={linkStyle} to={'/contact'}>
                            CONTACT
                        </Link>
                        <Link style={linkStyle} to={'/work'}>
                            WORK
                        </Link>
                    </div>
            </div>
            : null
        }

    </CSSTransitionGroup>
</div>
)

动画CSS:

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}

---

您的主要问题是CSS优先级。您的内联样式覆盖了CSS规则，因此

height

总是

80px

。您还需要设置

overflow:hidden

，以避免内容闪烁

你可以：

a） 使用

！重要信息

要覆盖内联样式，请执行以下操作：

。输入示例{
高度：0px！重要；
溢出：隐藏；
}
.example-enter.example-enter-active{
高度：80px！重要；
过渡：高度3秒；
}
.example-leave.example-leave-active{
高度：0px！重要；
过渡：高度3秒；
溢出：隐藏；
}

const cstransitiongroup=React.addons.cstransitiongroup；
常量链接=（{to，children}）=>；
常量集装箱样式={
位置：'固定'，
fontFamily:“Heebo”，无衬线，
排名：0，
宽度：“100%”，
高度：'80px'，
背景颜色：“黑色”，
textAlign:'中心'，
zIndex:24
};
类应用程序扩展了React.Component{
构造函数（）{super（）；this.state={}
render（）{
返回(
this.setState（{visible:！this.state.visible}）style={{{marginTop:100}}>Toggle visible
{this.state.visible？
博客
接触
工作
：null
}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
。输入示例{
高度：0px！重要；
溢出：隐藏；
}
.example-enter.example-enter-active{
高度：80px！重要；
过渡：高度3秒；
}
.example-leave.example-leave-active{
高度：0px！重要；
过渡：高度3秒；
溢出：隐藏；
}
您的主要问题是CSS优先级。您的内联样式覆盖了CSS规则，因此
height
总是
80px
。您还需要设置
overflow:hidden
，以避免内容闪烁

你可以：

a） 使用
！重要信息
要覆盖内联样式，请执行以下操作：

。输入示例{
高度：0px！重要；
溢出：隐藏；
}
.example-enter.example-enter-active{
高度：80px！重要；
过渡：高度3秒；
}
.example-leave.example-leave-active{
高度：0px！重要；
过渡：高度3秒；
溢出：隐藏；
}


const cstransitiongroup=React.addons.cstransitiongroup；
常量链接=（{to，children}）=>；
常量集装箱样式={
位置：'固定'，
fontFamily:“Heebo”，无衬线，
排名：0，
宽度：“100%”，
高度：'80px'，
背景颜色：“黑色”，
textAlign:'中心'，
zIndex:24
};
类应用程序扩展了React.Component{
构造函数（）{super（）；this.state={}
render（）{
返回(
this.setState（{visible:！this.state.visible}）style={{{marginTop:100}}>Toggle visible
{this.state.visible？
博客
接触
工作
：null
}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
。输入示例{
高度：0px！重要；
溢出：隐藏；
}
.example-enter.example-enter-active{
高度：80px！重要；
过渡：高度3秒；
}
.example-leave.example-leave-active{
高度：0px！重要；
过渡：高度3秒；
溢出：隐藏；
}


.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}