如何使用navbar-fixed-top的fadeInUp(来自animate.css)?

时间:2017-02-01 01:09:13

标签: css twitter-bootstrap reactjs animate.css web-frontend

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

2 个答案:

答案 0 :(得分:0)

您尝试添加固定导航的位置,而在动画时添加相对或绝对位置以及它无法正常工作的原因。要对某些内容进行动画处理,您可以参考此文档guide to use animation in react

或者 您可以在componentDidMount中运行一些jQuery,并在动画完成后添加导航固定类。

我仍然会建议第一种方法

答案 1 :(得分:0)

该问题可能可以用body { overflow-x: hidden; }来解决,因为animate.css会影响浮动内容,例如菜单或带有position: fixed;的其他元素。试试看。