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

＆＃13;

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')
);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

- 或 -

b）使用max-height，即使height更大，也会强制使用{<1}}：

.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;
}

＆＃13;

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')
);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

React CSSTransitionGroup不动画高度，宽度或顶部

1 个答案: