vue+swiper+animate.css製作全屏滾動H5
阿新 • • 發佈:2021-01-15
技術標籤:Vuevueswiperswiper Animate
年底了,接到需求要製作年度賬單,形式就是全屏滾動H5頁面,翻頁時給頁面元素新增動畫,大概效果如下:
H5長翻頁動畫效果
接下來就來介紹一下我的製作步驟;
1.安裝swiper、animate.css
npm install [email protected] --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>