idangerous.swiper插件切换页加载动画

最近做的微刊需要在用swiper插件切换页后，动画效果再展现出来。之前在一个百度的微刊里看到了类似的效果。

当初因为有顺序进行的动画，所以没有用css动画，用了jq。现在这个没有顺序了，就可以用这个了。

其实说起来挺简单的，就是在那个div的class里加上‘animate’这个类就行。

然后再css里.animate{}里定义动画就好了。

.animate .page1{
position:relative;
animation:moveup 3s linear 0s 1;
-moz-animation:moveup 2s linear 0s 1; /* Firefox */
-webkit-animation:moveup 4s linear 0s 1; /* Safari and Chrome */
-o-animation:moveup 4s linear 0s 1; /* Opera */
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@keyframes moveup
{
from {top:400px;}
to {top:0px;}
}

@-moz-keyframes moveup /* Firefox */
{
from {top:400px;}
to {top:0px;}
}

@-webkit-keyframes moveup /* Safari and Chrome */
{
from {top: 200px;}
to {top: -280px;}
}

@-o-keyframes moveup /* Opera */
{
from {top:200px;}
to {top:-150px;}
}

因为这切换页的插件是用‘swiper-slide-active’来判断是否激活的。就在插件里的idangerous.swiper.js文件，搜索–

slideActiveClass: ‘swiper-slide-active’,
slideVisibleClass: ‘swiper-slide-visible’,
slideAnimateClass:’animate’,

加上第三行。

然后我这个版本是2073行，

if (_this.visibleSlides.indexOf(slide) >= 0) {
slide.classList.add(params.slideVisibleClass);
slide.classList.add(params.slideAnimateClass);
} else {
slide.classList.remove(params.slideVisibleClass);
slide.classList.remove(params.slideAnimateClass);
}

另外还有2084行，再改改，加上也就行了。

然后就发现还是挺好用的。