在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" />

老話說的好，好記性不如爛筆頭，為了以後不入坑，随手一記。