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

谁践踏了优雅 2023-01-06 05:59 327阅读 0赞

年底了，接到需求要制作年度账单，形式就是全屏滚动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][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/][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>

[https_www.swiper.com.cn_download_index.html_file8]: https://www.swiper.com.cn/download/index.html#file8
[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/