vue使用 Swiper Animate实现超级酷炫的滚屏动画

原创

已于 2022-04-02 11:56:46 修改 · 7.2k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-07-16 10:50:08 首次发布

本文详细介绍了如何使用Swiper轮播组件结合animate.css实现炫酷的动画效果，包括Swiper的安装、初始化配置、动画应用及最终的视觉体验。

文章目录

功能

1.鼠标滚用切换页面，并附带超酷的动画特效
2.感受页面内容从四面八方向你奔赴而来的感觉
3.animate超多原生css3动画特效任你选择
4.大屏数据，一屏页面，带给你无与伦比的视图体验

1.下载 swiper

npm install swiper --save

2.初始化swiper

html片段

<template>
    <div class="swiper-container" style='background-color: #020D35;height:100vh;'>
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="height: 100vh;"><Home></Home></div>
            <div class="swiper-slide" style='height:100vh;'><TeachersData></TeachersData></div>
            <div class="swiper-slide" style='height:100vh;'><WisdomEducational></WisdomEducational></div>
            <div class="swiper-slide" style='height:100vh;'><ResearchResults></ResearchResults></div>
        </div>
        
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</template>

js片段

<script>
import Home from "./home/home"
import TeachersData from "./teachersData/teachersData"
import Swiper from "swiper"
import WisdomEducational from "./wisdomEducational/wisdomEducational"
import ResearchResults from "./researchResults/researchResults"

export default {
   <