background

As 2020 approaches, many apps on our mobile phones will give us a variety of cool year-end bills. I believe many of you have seen similar effects. Without further ado, let’s learn how to make it.

From a technical point of view: Year-end billing = page swiping + DOM animation + data

For the front end staff: page sliding and DOM animation are the most important.

Page sliding and DOM animation are done separately, and both are easy and easy to implement. But how do you make page sliding and DOM animation work seamlessly?

2. Development process

1) Introduce vue-awesome-swiper to realize page sliding

npm install --save vue-awesome-swiper

There are two ways of introduction

A) global introduction (in main.js)

import vueAwesomeSwiper from 'vue-awesome-swiper'
import  './static/css/swiper.min.css'(Downloaded locally) Vue.use(vueAwesomeSwiper)Copy the code

B) local (in components)

import { swiper, swiperSlide } from 'vue-awesome-swiper'
components: {
      swiper,
      swiperSlide,
    }
Copy the code

Page initialization

<swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
      <swiper-slide >
        <first-page></first-page>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <old-driver-page></old-driver-page>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <join-page></join-page>
      </swiper-slide>
    </swiper>
Copy the code
  data() {
      return{swiperOption: {// Initialization parameter direction:'vertical', // Vertical toggle option autoplay:false, // Whether to automatically play height :window. innerHeight, // high width:window.innerWidth // wide}}}, computed: {swiper() {
        return this.$refs.mySwiper.swiper 
      }
    },
    mounted() {enclosing swiper. SlideTo (0, 0,false); // Skip to page},Copy the code

Introduction select any way can be, the project started, the page sliding effect is complete.

2) Introduce animate. CSS

The introduction of the animate. CSS

npm install animate.css --save

Introduced in the main. Js

import animated from 'animate.css'
Vue.use(animated)
Copy the code

# # # # 3) introducing swiper. Animate1.0.3. Min. Js

The point is ！！！！

Page slides and DOM animations are linked by swiper.animate

Download address: https://www.swiper.com.cn/download/index.html#file8



import * as swiperAnimated from './.. /.. / static/js/swiper. Animate1.0.3. Min. Js'

Component configuration:

data() {
   return {
     swiperOption: {
       direction: 'vertical', // Vertical toggle option autoplay:false,
       height: window.innerHeight,
       width: window.innerWidth,
       on: {
         init: function() { swiperAnimated.swiperAnimateCache(this); / / hide animation element swiperAnimated swiperAnimate (this); / / initialization complete start animation}, slideChangeTransitionEnd:function() { swiperAnimated.swiperAnimate(this); // The current Slide animation also runs at the end of each Slide switch}}}}},Copy the code

Add to the Dom of the animation:

Swiper-animate -duration: optional, animation duration (in seconds) swiper-animate-delay: optional, animation delay (in seconds)Copy the code

We open swiper. Animate1.0.3. Min. Js found the file and no export using several methods,

Modifying their swiper. Animate1.0.3. Min. Js file, after the modification of files:

export function swiperAnimateCache(a) {
  for (var  j = 0; j < a.slides.length; j++)
    for (let allBoxes = a.slides[j].querySelectorAll(".ani"), 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(a); 
   const b = a.slides[a.activeIndex].querySelectorAll(".ani");
    for (let  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 style = b[i].attributes["style"].value

      const duration = b[i].attributes["swiper-animate-duration"]? b[i].attributes["swiper-animate-duration"].value : "" 

      duration && (style = style + "animation-duration:" + duration + "; -webkit-animation-duration:" + duration + ";")

      const  delay = b[i].attributes["swiper-animate-delay"]? b[i].attributes["swiper-animate-delay"].value : ""

      delay && (style = style + "animation-delay:" + delay + "; -webkit-animation-delay:" + delay + ";")
      b[i].setAttribute("style", style) 
    }
  }
  

export function clearSwiperAnimate(a) { 
  for (var j = 0; j < a.slides.length; j++){
    let allBoxes = a.slides[j].querySelectorAll(".ani")
    for (let 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 effectV = allBoxes[i].attributes["swiper-animate-effect"].value 
       allBoxes[i].attributes["swiper-animate-effect"] && (effectV,allBoxes[i].className = allBoxes[i].className.replace(effectV, ""))}}}Copy the code

File modification, technical ability is limited, if anyone has a better modification method, welcome message communication.

Dom animation configuration www.swiper.com.cn/usage/anima… (Swiper website)

Dome effect: pan.baidu.com/s/1pALAcGfA…

The last

Above is my implementation of a year-end billing page activity and DOM animation effect of the entire process, I hope to help you