This is the first day of my participation in the Challenge of Writing more in November.The final text challenge in 2021

introduce

Swiper Animate is a quick plugin to create CSS3 animation effects in Swiper. Before modular engineering was as common as it used to be, everybody used CDN to introduce it without any problems. However, if vUE is used in modularization, errors will be reported, and there are many problems. This issue is to let the students who just started to learn to use it, emergency pit, to prevent wasting precious time.

Here is an example of Swiper Animate in VUe2:

The body of the

1. Install

We recommend using the 5.x version of Swiper in VUe2, whereas you can use the 7.x version in VUe3. We used swiper5.4.5 for stability in this case, so let’s install it:

yarn add swiper@5.4. 5
/ / or
npm i -S swiper@5.4. 5
Copy the code

Structure of 2.

<template> <div class="swiper-container" ref="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <! </div> <div class="swiper-slide"> <! </div> </div> <! - pager -- > < div class = "swiper - pagination" > < / div > <! - the left arrow -- > < div class = "swiper - button - prev" > < / div > <! -- Right arrow -- <div class="swiper-button-next"></div> </div> </template> <script> import "swiper/ CSS /swiper.css"; import Swiper from "swiper"; export default { name: "Banner", data() { return { swiper: null }; }, mounted() { this.init(); }, methods: { init() { this.swiper = new Swiper(this.$refs.swiper, { pagination: { el: ".swiper-pagination" }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, loop: true }); }}}; </script>Copy the code

This is the basic structure of swiper. At this point, we can see a normal rotation implemented like this:

Again, it’s very simple, as long as the version is correct, you can look at the document and change the form you want.

Now, the most important question is, how do you animate?

3. The animation

If you have used swiper before, you will be able to use swiper. Animate. Or you can’t get the official swiperAnimateCache function to hide elements and swiperAnimate function to initialize animations after importing require.

The reason is that the official provided is compressed and there is no function export:

So, the first thing we need to do is ask him to export these functions, which can be received in Vue:

Here I have compiled a copy, which can be taken from my warehouse in Gitee if you need it.

Now that we are ready to export these functions, we need to write the animation structure and function usage.

<template> <! -... --> <div class="swiper-slide"> <div class="title"> <h2 class="ani" swiper-animate-effect="fadeIn" Swiper-animate -duration="1s" swiper-animate-delay=".2s" > </h2> </div> </div> <! -... --> </template>Copy the code

Swiper-animate -effect: animation name

Swiper-animate -duration: continuous events

Swiper-animate -delay: indicates the waiting time

Don’t forget the class with ANI proof, swiper the animate with documentElement. QuerySelectorAll (‘ ANI ‘) to perform an animation node capture all current.

The swiperAnimateCache function is used to hide animation elements during the swiper life cycle initialization, and the swiperAnimate function is used to initialize animation elements, as well as the switch event.

<script> import ".. /lib/animate.css"; import { swiperAnimateCache, swiperAnimate } from ".. / lib/swiper. Animate1.0.3. Js "; / /... this.swiper = new Swiper(this.$refs.swiper, { // .. on: { init: function() { swiperAnimateCache(this); swiperAnimate(this); }, slideChangeTransitionEnd: function() { swiperAnimate(this); }} / /.. </script>Copy the code

This is the same as the official version, of course you can use slideChange to trigger the animation initialization.

Now we can implement all kinds of Animate. CSS animations at will.

conclusion

We can see that as long as swiper is used correctly in vue2, there will be no problems. In addition, swiper. Animate does not provide the js file with export functions, which is not modular development.

In addition, according to the experiment, the latest swiper7.x can also be used normally, but if swiper7.x is used, it is suggested to use VUe3 to develop the official document, because VUe3 is a CompositionAPI, the disassembly and extraction will be more clear. If vue3 is used in the project, everyone should choose 7.x. 3. X or 5. X is best for VUe2.