Swiper Animate??????
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Swiper Animate??????相关的知识，希望对你有一定的参考价值。
?????????animate ?????? duration ?????? oom amp ?????? img alt
??????CSS?????????swiper.min.css???animate.min.css
JS?????????swiper.min.js???swiper.animate.min.js???jquery.min.js
?????????
1. ??????Swiper Animate???????????????swiper.animate.min.js???animate.min.css???
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
<script src="path/to/swiper.animate.min.js"></script>
</body>
</html>
2?????????JS?????????????????????????????????????????????????????????????????????
swiperAnimateCache(swiper); //??????????????????
swiperAnimate(swiper); //??????????????????????????? ??????????????????swiper.animate.min.js???????????????
3. ?????????????????????????????????????????? ani ????????????????????????????????????Swiper Animate???????????????????????????
swiper-animate-effect???????????????????????? fadeInUp
swiper-animate-duration?????????????????????????????????????????????????????? 0.5s
swiper-animate-delay?????????????????????????????????????????????????????? 0.3s
???swiper.animate.min.js???????????????????????????????????????????????????????????????swiperAnimate(a){}?????????????????????????????????
//????????????????????????????????????
iterationCount = b[i].attributes["swiper-animate-iteration-count"] ? b[i].attributes["swiper-animate-iteration-count"].value : "",
iterationCount && (style = style + "animation-iteration-count:" + iterationCount + "; -webkit-animation-iteration-count:" + iterationCount + ";"),
????????????????????????????????????????????????
<div class="enter ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-timing-function="ease" >
??????<img src="img/guide-enter.png" class=???ani??? swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.0s" swiper-animate-timing-function="ease-in-out" swiper-animate-iteration-count=???infinite???/>
</div>
以上是关于Swiper Animate??????的主要内容，如果未能解决你的问题，请参考以下文章