Как использовать fadeInUp (from animate.css) с navbar-fixed-top?

Question

FadeInUp, кажется, отключает navbar-fixed-top, когда я использую оба из них, мой navbar прокручивает страницу и когда я удаляю fadeInUp, все работает нормально. Я использовал fadeInUp propertyt из animate.css в своем MainApp.jsx. Я хочу использовать оба из них, так что есть ли способ исправить эту проблему.

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

вы пытаетесь добавить как позицию, установленный для навигации в то время как относительное или абсолютное во время анимации, именно поэтому он не работает. чтобы оживить что-то в реале вы можете сослаться на этот документ guide to use animation in react

Или вы можете запустить некоторый jQuery в компонентеDidMount и добавить nav-fixed класс после завершения анимации.

Еще я предложу первый подход