javascript - React CSSTransitionGroup 不为高度、宽度或顶部设置动画

Question

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

我试过这个 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;
}

Answer 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>