vue swiper animate 는 어떻게 사용합니까?사실 매우 간단하다. 인터넷에서 검색하는 데 많은 구덩이가 생겼고 버전 업데이트 페이지가 매우 빨라서 많은 것을 사용할 수 없다.

swiper는 윤방 슬라이딩 효과 플러그인으로es5는 대응하는 css와 js를 간단하게 인용하면 된다. 그리고 어떤 착지 페이지는 애니메이션의 상호작용이 필요하다. 애니메이션 라이브러리가 매우 많은데 가장 먼저 떠오르는 것은 animate이다.css라니요.사용하기 좋은데 문제가 하나 있다. 바로 페이지를 불러올 때 애니메이션이 모두 실행되었기 때문에 두 번째 페이지로 미끄러질 때 애니메이션 효과가 없다. 해결 방법은 초기화할 때 애니메이션 효과가 있는 노드를 숨기는 것이다. 이럴 때 swiper를 사용해야 한다.animate.js.
swiper 홈페이지에서 원하는 거 다 있어요.
그렇다면 이 스윙퍼를 어떻게 사용하느냐가 문제다.animate.js는요, vue에 vue-awesome-swiper의 봉인이 swiper가 없기 때문입니다.animate의 봉인 때문에 우리는 방금 vue를 접한 학생들에게 약간의 번거로움과 곤란을 초래했다. 우리는 이 자신이 불러올 js 파일을 어떻게 사용해야 합니까?다음은 몇 가지 절차입니다. 사실은 매우 간단합니다. 단지 자신이 귀찮은 일에 부딪히면 가장 먼저 생각나는 것은 교과서를 찾는 것이지 스스로 문제를 고려하여 문제를 해결하는 것이 아닙니다.
vue에서 인용만 해주세요.
cnpm install vue-awesome-swiper --save 

main.js     
import VueAwesomeSwiper from 'vue-awesome-swiper'; 
npm install animate.css --save
Vue.use(VueAwesomeSwiper);
Vue.use(animate)

이 단계에서는 홈페이지의 예시에 따라 swiper를 정상적으로 사용하고 그 다음에 swiper를 사용할 수 있다.animate.js
홈페이지에서 제공하는 스윙 때문에.animate1.0.3.js는 es5 쓰기 방법입니다. vue에서 사용하려면 수정이 필요합니다. 아래 연결을 클릭하여 다운로드하십시오
스윙퍼를 직접 찾아주세요.animate1.0.3.js, 없으면 잠시 후에 다운로드하세요. 자원이 방금 업로드되었습니다.
어셈블리에서

        import * as swiperAni from '../assets/js/swiper.animate1.0.3.min.js'
    
        return {
                    swiperOption: {
                    direction: 'vertical', //       
                    loop: false,
                    on: {
                        init: function () {
                            swiperAni.swiperAnimateCache(this)
                            swiperAni.swiperAnimate(this)
                        },
                        slideChangeTransitionStart: function () {

                        },
                        slideChangeTransitionEnd: function () {

                        },
                        slideChange: function () {
                            swiperAni.swiperAnimate(this)
                        }
                    }
                }
            }
            
        

OK, 도움이 된다면 기쁠 거야.