如何将 fadeInUp(from animate.css) 与 navbar-fixed-top 一起使用？

Question

FadeInUp 似乎禁用了 navbar-fixed-top，因为每当我同时使用它们时，我的导航栏都会随页面滚动，当我删除 fadeInUp 时，一切正常。我在 MainApp.jsx 中使用了 animate.css 的 fadeInUp 属性。我两个都想用，请问有什么办法可以解决吗

MainApp.jsx

import React from "react"
import { render } from "react-dom"
import Headline from "./components/Headline"
import Footer from "./components/Footer"

class MainApp extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            load : false,
        }
    }

    componentDidMount(){
        this.setState({
            load : true,
        })
    }

    render(){
            return(
                <div className="animated fadeInUp">
                    <Headline>Heres the main page</Headline>
                    <Footer></Footer>
                </div>
            )
    }
}

render(<MainApp/>, document.getElementById('MainApp'))

Headline.jsx

import React from "react"
import styles from "./css/navbarItems.css"


export default class Headline extends React.Component {

    handleSelect(selectedKey) {
      alert('selected ' + selectedKey);
    }

    render() {
    return (
        <div>
            <div>
                <nav className="navbar navbar-inverse navbar-default navbar-fixed-top">
                  <div className="container-fluid">
                    <div className="navbar-header">
                      <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>                        
                      </button>
                      <a className="navbar-brand" href="#">WebSiteName</a>
                    </div>
                    <div className="collapse navbar-collapse" id="myNavbar">
                      <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home</a></li>
                        <li className="dropdown">
                          <a className="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span className="caret"></span></a>
                          <ul className="dropdown-menu">
                            <li><a href="#">Page 1-1</a></li>
                            <li><a href="#">Page 1-2</a></li>
                            <li><a href="#">Page 1-3</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                      </ul>
                      <ul className="nav navbar-nav navbar-right">
                        <li><a href="#"><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span className="glyphicon glyphicon-log-in"></span> Login</a></li>
                      </ul>
                    </div>
                  </div>
                </nav>
            </div>
        </div>
    )
  }
}

Answer 1

您正在尝试在动画时添加相对或绝对导航的固定位置，这就是它不起作用的原因。要在 React 中设置动画，您可以参考此文档 guide to use animation in react

或者你可以在 componentDidMount 中运行一些 jQuery 并在动画完成后添加 nav-fixed class。

我还是建议第一种方法

Answer 2

这个问题可能可以通过 body { overflow-x: hidden; } 解决，因为 animate.css 会影响浮动内容，例如position: fixed; 的菜单或其他元素。试一试。

如何将 fadeInUp(from animate.css) 与 navbar-fixed-top 一起使用？

How to use fadeInUp(from animate.css) with navbar-fixed-top?

css

web-frontend

twitter-bootstrap

animate.css

reactjs