最近做的微刊需要在用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行,再改改,加上也就行了。
然后就发现还是挺好用的。