在swiper中添加css动画

最近碰到一个swiper项目，需求中最后一页有一个动画是手指从按钮的位置移动到右上角，动画只出现一次。第一反应就是css3写一个动画，使用swiper的回调函数OnSlideChangeEnd判断对应的页面addClass，但是发现add不进去，具体原因，暂时不知，代码如下：

css:

.share {
	width: 30px;
	height: 40px;
	position: absolute;
	left: 50%;
	top: 74%;
	opacity: 0;
}

.shareanimate {
	animation: shareani 4s ease;
	-webkit-animation: shareani 4s ease;
	-moz-animation: shareani 4s ease;
	-ms-animation: shareani 4s ease;
}

@keyframes shareani {
	0% {
		left: 50%;
		top: 74%;
		opacity: 0.8;
	}
	100% {
		left: 85%;
		top: 0;
		opacity: 0;
	}
}

@-webkit-keyframes shareani {
	0% {
		left: 50%;
		top: 74%;
		opacity: 0.8;
	}
	100% {
		left: 85%;
		top: 0;
		opacity: 0;
	}
}

@-moz-keyframes shareani {
	0% {
		left: 50%;
		top: 74%;
		opacity: 0.8;
	}
	100% {
		left: 85%;
		top: 0;
		opacity: 0;
	}
}

@-ms-keyframes shareani {
	0% {
		left: 50%;
		top: 74%;
		opacity: 0.8;
	}
	100% {
		left: 85%;
		top: 0;
		opacity: 0;
	}
}
           

html:

<img src="images/share.png" class="img-responsive share " id="share" />
           

script：

window.onload = function() {
				var swiper = new Swiper(".swiper-container", {
					on: {
						init: function() {
							swiperAnimateCache(this);
							swiperAnimate(this);
						},
						slideChangeTransitionEnd: function() {
							swiperAnimate(this);
							if(this.activeIndex == 8) {
								$("#share").addClass("shareanimate");
							}
						}
					}
				});
			}
           

另外一种方法，用swiper添加动画的方法写，方便好用，代码如下：

<img src="images/share.png" class="img-responsive share ani" swiper-animate-effect="shareanimate" swiper-animate-duration="4s"  swiper-animate-delay="0s"  id="share" />

老话说的好，好记性不如烂笔头，为了以后不入坑，随手一记。