swiper、animate.css在react中开发fullpage页面

import React,{Component} from 'react';
import './App.css';
import Swiper from "swiper"
import SwiperAnimation from '@cycjimmy/swiper-animation';
import "animate.css/animate.min.css";

export default class App extends Component{
  componentDidMount() {
    let  swiperAnimation = new SwiperAnimation();
    new Swiper('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 1,
      spaceBetween: 30,
      mousewheel: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      on: {
        init: function () {
          swiperAnimation.init(this).animate();
        },
        slideChange: function () {
          swiperAnimation.init(this).animate();
        }
      }
    });
  }

  render() {
    return (
      

        

          

            
fadeOutLeft
            
fadeInDown
            
fadeInDown3
            
fadeInLeft
            
fadeInRight
            
fadeInRightBig
            
fadeInUp
          
          

            
bounceInDown
            
bounceInLeft
            
bounceInRight
            
bounceInUp
          
          

            
lightSpeedIn
          
          

            
          
          
Slide 5
          
Slide 6
          
Slide 7
          
Slide 8
          
Slide 9
          
Slide 10
        
        

      
    );
  }
}

html, body,#root {
  position: relative;
  height: 100%;
}


.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

}
.swiper-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  flex-direction: column;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  transition-property: transform;
}