我使用的时候一直报错,参考以下https://segmentfault.com/q/1010000009216803 有人改了swiper.animate.min.js文件解决
<template> <div class="culture"> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide> <div class="title ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">11111</div> <div class="text ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">111111</div> <div class="pics ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s">1111111</div> </swiper-slide> <swiper-slide> <div class="title ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div> <div class="text ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div> <div class="pics ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s">222222</div> </swiper-slide> <swiper-slide> <div class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div> <div class="text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div> <div class="pics ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s">3333333</div> </swiper-slide> </swiper> </div> </template> <script> import * as swiperAni from '@/common/js/swiper.animate.min.js' export default { name: 'culture', data() { return { swiperOption: { // loop: true, effect: 'fade', // 变手势 grabCursor: true, initialSlide: 0, // 滑动方向,水平horizontal,垂直vertical direction: 'vertical', on: { init: function () { swiperAni.swiperAnimateCache(this) swiperAni.swiperAnimate(this) }, slideChange: function () { swiperAni.swiperAnimate(this) } } } } }, computed: { swiper() { return this.$refs.mySwiper.swiper } } } </script>
// swiper.animate.min.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, ' ')) } }