Swiper中文论坛

标题: 请问如何正确的设置不同的出入动画？ [打印本页]
作者: nodejs    时间: 2016-12-2 08:40
标题: 请问如何正确的设置不同的出入动画？
本帖最后由 nodejs 于 2016-12-2 14:46 编辑

first：如题

然后HTML代码如下：
  1. <!DOCTYPE html>
  2. <html>

  4.         <head>
  5.                 <meta charset="UTF-8">
  6.                 <title></title>
  7.                 <link rel="stylesheet" type="text/css" href="../css/swiper-3.4.0.min.css" />
  8.                 <link rel="stylesheet" type="text/css" href="../css/animate.min.css" />
  9.                 <style type="text/css">
  10.                         .swiper-container {
  11.                                 width: 800px;
  12.                                 height: 450px;
  13.                         }
  14.                         
  15.                         .swiper-slide {
  16.                                 background-size: cover;
  17.                         }
  18.                         
  19.                         .swiper-slide .ani {
  20.                                 font-size: 20px;
  21.                                 color: white;
  22.                                 text-shadow: 0 0 10px gray;
  23.                                 background-color: rgba(255,255,255,0.5);
  24.                                 
  25.                         }
  26.                 </style>
  27.         </head>

  29.         <body>
  30.                 <div class="swiper-container">
  31.                         <div class="swiper-wrapper">
  32.                                 <div class="swiper-slide">
  33.                                         <div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
  34.                                 </div>
  35.                                 <div class="swiper-slide">
  36.                                         <div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
  37.                                 </div>
  38.                                 <div class="swiper-slide">
  39.                                         <div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
  40.                                 </div>
  41.                                 <div class="swiper-slide">
  42.                                         <div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
  43.                                 </div>
  44.                         </div>
  45.                 </div>

  47.                 <script src="../js/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
  48.                 <script src="../js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>

  50.         </body>

  52. </html>
复制代码
JS代码如下：
  1. <script>
  2. var imgs = document.querySelectorAll(".swiper-slide");
  3. for(var i = 0, l = imgs.length; i < l; i++) {
  4. imgs[i].style.backgroundImage = "url(../img/" + (i + 1) + ".jpg)";
  5. }

  7. var mySwiper = new Swiper('.swiper-container', {
  8. onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
  9. swiperAnimateCache(swiper); //隐藏动画元素
  10. swiperAnimate(swiper); //初始化完成开始动画
  11. },
  12. onSlideChangeEnd: function(swiper) {
  13. swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  14. }
  15. })
  16. </script>
复制代码
PS：此方法在swiper-slide内的元素加data-slide-in(out)也是百度来的，然后想test一下，发现并没有任何作用。
Q:是否此方法是错误/过时的？如果不是，请问正确方法是什么？如果是不对的方法，请问现在的方法是什么？
非常感谢你的回答！
2016-12-02 14:43:42
已经找到了原因是没有引入坛主的swiper.animate-twice.min.js，
那么新的问题来了：data-slide-out 加上了“force”仍然是入场动画结束之后运行，而不是切换下一个slide才运行？



作者: nodejs    时间: 2016-12-2 08:41
二楼 ，hahahahhahhhh



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2