vue+swiper+animate.css制作全屏滚动H5

最新推荐文章于 2024-08-09 07:01:33 发布

一捆铁树枝

最新推荐文章于 2024-08-09 07:01:33 发布

阅读量2.8k

点赞数 3

分类专栏： Vue 文章标签： vue swiper swiper Animate

本文链接：https://blog.csdn.net/qq_41725450/article/details/112601375

版权

Vue 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

本文介绍了如何使用Swiper和animate.css库来制作全屏滚动的H5页面，通过添加动画效果实现翻页时元素的动态展示。在Vue项目中，首先安装所需依赖，然后引入animate.css和修改后的animate.js。接着在组件内应用 ani 类和相关参数，最后在初始化和滑动切换时调用动画函数，实现了不同slide内容的动态进入效果。

摘要由CSDN通过智能技术生成

年底了，接到需求要制作年度账单，形式就是全屏滚动H5页面，翻页时给页面元素添加动画，大概效果如下：

H5长翻页动画效果

接下来就来介绍一下我的制作步骤；

1.安装swiper、animate.css

npm install swiper@3 --save

npm install animate.css --save

2.在main.js中引入animate.css

// main.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"

// 引入animate.css
import animated from "animate.css"

Vue.use(animated)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

3.引入animate.js

swiper官方也提供了swiper.animate.min.js下载；下载地址看这→ https://www.swiper.com.cn/download/index.html#file8
但是官方提供的版本不能再Vue中直接使用，因此我稍作了一些改动，在src文件夹下新建lib文件夹，然后在它下面新建animate.js，将下面的内容添加到animate.js内

// animate.js
export function swiperAnimateCache() {
  const allBoxes = window.document.documentElement.querySelectorAll(".ani")
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes["style"]
      ? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value)
      : allBoxes[i].setAttribute("swiper-animate-style-cache", " ")
    allBoxes[i].style.visibility = "hidden"
  }
}

export function swiperAnimate(a) {
  clearSwiperAnimate()
  var b = a.slides[a.activeIndex].querySelectorAll(".ani")
  for (var i = 0; i < b.length; i++) {
    b[i].style.visibility = "visible"
    const effect = b[i].attributes["swiper-animate-effect"]
      ? b[i].attributes["swiper-animate-effect"].value
      : ""
    b[i].className = b[i].className + " " + effect + " " + "animated"
    const duration = b[i].attributes["swiper-animate-duration"]
      ? b[i].attributes["swiper-animate-duration"].value
      : ""
    // duration && style
    const delay = b[i].attributes["swiper-animate-delay"]
      ? b[i].attributes["swiper-animate-delay"].value
      : ""
    const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";"
    // delay && (style = style )
    b[i].setAttribute("style", style)
  }
}

export function clearSwiperAnimate() {
  var allBoxes = window.document.documentElement.querySelectorAll(".ani")
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value)
    allBoxes[i].style.visibility = "hidden"
    allBoxes[i].className = allBoxes[i].className.replace("animated", " ")
    const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value
    /* eslint-disable-next-line */
    allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
  }
}

下面就是在组件内使用了

4.在组件内使用

在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp （更多的切换效果可参考如下：https://daneden.github.io/animate.css/）

swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

完整代码如下：

<template>
  <div class="main">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="swiper-slide-content ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0" style="background:#ff0000;">11111</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-content ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0" style="background:#ff0000;">222222</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-content ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="0" style="background:#ff0000;">333333</div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-content ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="2s" swiper-animate-delay="0" style="background:#ff0000;">44444</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as swiperAni from "../lib/animate"
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css"
export default {
  name: "culture",
  data() {
    return {}
  },
  created() {
    this.$nextTick(function() {
      const mySwiper = new Swiper(".swiper-container", {
        loop: false, // 循环模式选项
        // speed: 500,
        direction: "vertical",
        onInit: (swiper) => {
          swiperAni.swiperAnimateCache(swiper) // 隐藏动画元素
          swiperAni.swiperAnimate(swiper) // 初始化完成开始动画
        },
        onSlideChangeEnd: (swiper) => {
          swiperAni.swiperAnimate(swiper) // 每个slide开始切换时也运行当前slide动画
          // swiper.slides.eq(this.activeIndex).find(".ani").removeClass("ani") // 动画只展现一次，去除ani类名
        }
      })
    })
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  .swiper-container {
    background-color: #020d35;
    height: 100vh;

    .swiper-slide {
      height: 100vh;

      .swiper-slide-content {
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }
    }
  }
}
</style>