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

本文介绍了如何结合Swiper.js和Animate.css库,在React应用程序中创建富有动态效果的全屏滚动页面。通过Swiper实现平滑的页面滑动,利用Animate.css为内容添加过渡动画,提升用户体验。
摘要由CSDN通过智能技术生成
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 (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
animateControl v1.0.3 的功能特点: 1、完全兼容swiper的loop模式,完美支持swiper的嵌套。 2、完美支持animate.css,能够为页面的任意元素添加动画。 3、完美支持为单个元素同时添加多个animate.css动画效果(无需进行HTML标签的嵌套),并且,可以随意控制这些动画效果的播放方式。 4、能够设置每一个动画效果的播放方式:同步播放、依次播放、循环播放。 5、能够设置每一个动画效果的动画类型:进入动画、表演动画、退出动画(在animate.css的源码,opacity值从0至100的是进入动画,没有opacity属性的是表演动画。opacity值从100到0的是退出动画)。 6、实现了排版效果、动画效果、动画控制的完美分离,极大的提高了开发效率,能够在很短的时间内实现复杂的动画效果控制。 7、animateControl 不与swiper结合时,可对网页的其它元素添加动画效果,并进行控制。 8、能够让不懂JS代码的人,经过简单的学习,就能快速的制作HTML5+CSS3动态微网页。 9、相较于上一个版本,在 v1.0.3 对整个核心代码进行了优化,大大提升了运行速率,使动画播放更流畅。 10、相较于上一个版本,在 v1.0.3 简化了所有参数的名称,让使用变得更加简单(用更少的代码,就能实现更复杂的效果)。 11、本次发布的动画控制器文件为min版,大大减少了文件的体积(下载解压后,文件位置在:js/swiper.animate.min.js)。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值