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>
)
}
}
答案 0 :(得分:0)
您尝试添加固定导航的位置,而在动画时添加相对或绝对位置以及它无法正常工作的原因。要对某些内容进行动画处理,您可以参考此文档guide to use animation in react
或者 您可以在componentDidMount中运行一些jQuery,并在动画完成后添加导航固定类。
我仍然会建议第一种方法
答案 1 :(得分:0)
该问题可能可以用body { overflow-x: hidden; }
来解决,因为animate.css会影响浮动内容,例如菜单或带有position: fixed;
的其他元素。试试看。