navbar-fixed-topでfadeInUp（animate.cssから）を使用するには？

Question

FadeInUpは、navbar-fixed-topを両方とも使用するたびに無効になっているようです。私のnavbarはページをスクロールし、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

あなたはそれが働いていない理由ですアニメーションの時には、相対または絶対ながら、ナビゲーションのための固定の両方の位置を追加しようとしています。反応して何かをアニメーション化するには、このドキュメントを参照することができますguide to use animation in react

または あなたはアニメーションが完成した後にcomponentDidMountでいくつかのjQueryを実行し、nav-fixedクラスを追加できます。

まだ最初のアプローチを提案します。