反应 CSSTransitionGroup 没有动画高度，宽度或顶部答案

【问题标题】：React CSSTransitionGroup not animating height, width, or top反应 CSSTransitionGroup 没有动画高度，宽度或顶部
【发布时间】：2017-11-10 19:20:39
【问题描述】：

我正在尝试让导航栏在滚动时上下滑动。很简单。我可以得到不透明度没问题。但没有其他工作。导航栏只是出现和消失，没有动画。

我已经尝试过很多变体的SO post。需要添加 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>
)

容器样式：

const containerStyle = {
    position: 'fixed',
    fontFamily: "'Heebo', sans-serif",
    top: 0,
    width: '100%',
    height: '80px',
    backgroundColor: 'black',
    textAlign: 'center',
    zIndex: 24
}

动画 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;
}

【问题讨论】：

标签： javascript css reactjs css-animations

【解决方案1】：

您的主要问题是 CSS 优先级。您有覆盖 CSS 规则的内联样式，因此 height 始终为 80px。您还需要设置overflow: hidden 以避免某些内容闪烁。

你可以：

a) 使用!important 覆盖内联样式：

.example-enter {
    height: 0px !important;
    overflow: hidden;
}
.example-enter.example-enter-active {
    height: 80px !important;
    transition: height .3s ease;
}
.example-leave.example-leave-active {
    height: 0px !important;
    transition: height .3s ease;
    overflow: hidden;
}

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
const Link = ({to,children}) => <a href={to}>{children}</a>;

const containerStyle = {
    position: 'fixed',
    fontFamily: "'Heebo', sans-serif",
    top: 0,
    width: '100%',
    height: '80px',
    backgroundColor: 'black',
    textAlign: 'center',
    zIndex: 24
};

class App extends React.Component {
  constructor() { super(); this.state = {} }
  render() {
    return (
    	<div>
      	<button onClick={() => this.setState({visible: !this.state.visible})} style={{marginTop:100}}>Toggle Visible</button>

        <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeave 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  src={'https://s3.amazonaws.com/philandrews/header-logo.svg'} alt='Phil Andrews Logo' />
                    </div>
                    <div className='pure-u-12-24'>
                        <Link to={'/blog'}>
                            BLOG
                        </Link>
                        <Link to={'/contact'}>
                            CONTACT
                        </Link>
                        <Link to={'/work'}>
                            WORK
                        </Link>
                    </div>
            </div>
            : null
        }
    </CSSTransitionGroup>
        </div>);
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

.example-enter {
    height: 0px !important;
    overflow: hidden;
}
.example-enter.example-enter-active {
    height: 80px !important;
    transition: height .3s ease;
}
.example-leave.example-leave-active {
    height: 0px !important;
    transition: height .3s ease;
    overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"></div>

- 或 -

b) 使用max-height，即使height 更大，也会强制执行：

.example-enter {
    max-height: 0;
    overflow: hidden;
}
.example-enter-active {
    max-height: 80px;
    transition: max-height .3s ease;
}
.example-leave {
    max-height: 80px;
}
.example-leave-active {
    max-height: 0;
    transition: max-height .3s ease;
    overflow: hidden;
}

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
const Link = ({to,children}) => <a href={to}>{children}</a>;

const containerStyle = {
    position: 'fixed',
    fontFamily: "'Heebo', sans-serif",
    top: 0,
    width: '100%',
    height: '80px',
    backgroundColor: 'black',
    textAlign: 'center',
    zIndex: 24
};

class App extends React.Component {
  constructor() { super(); this.state = {} }
  render() {
    return (
    	<div>
      	<button onClick={() => this.setState({visible: !this.state.visible})} style={{marginTop:100}}>Toggle Visible</button>

        <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeave 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  src={'https://s3.amazonaws.com/philandrews/header-logo.svg'} alt='Phil Andrews Logo' />
                    </div>
                    <div className='pure-u-12-24'>
                        <Link to={'/blog'}>
                            BLOG
                        </Link>
                        <Link to={'/contact'}>
                            CONTACT
                        </Link>
                        <Link to={'/work'}>
                            WORK
                        </Link>
                    </div>
            </div>
            : null
        }
    </CSSTransitionGroup>
        </div>);
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

.example-enter {
    max-height: 0;
    overflow: hidden;
}
.example-enter-active {
    max-height: 80px;
    transition: max-height .3s ease;
}
.example-leave {
    max-height: 80px;
}
.example-leave-active {
    max-height: 0;
    transition: max-height .3s ease;
    overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：