Swiper中文论坛

标题: 某一页面内容高度高，导致动画无效果，怎样能得到 [打印本页]

作者: wait 时间: 2017-6-17 10:40
标题: 某一页面内容高度高，导致动画无效果，怎样能得到
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8" />
      <title>长动画测试</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
      <link rel="stylesheet" type="text/css" href="css/index.css"/>
      
      <link rel="stylesheet" href="css/animate.min.css">
      <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
      <script src="js/swiper-3.4.2.min.js"></script>
      <script src="js/swiper.animate1.0.2.min.js"></script>
</head>
<body>
      <div class="swiper-container swiper-container-v">
         <div class="swiper-wrapper">
            <div class="swiper-slide">Vertical Slide 1</div>
            <div class="swiper-slide second">
                  <div class="swiper-container swiper-container-scrollbar">
                     <div class="swiper-wrapper">
                           <div class="swiper-slide">
                              <h3>title</h3>
                              <p>this is a p tag</p>
                                                                                 美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。
                                             美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
                                             节约型和环境友好型社会建设，促进世界园艺事业大发展、
                                             大繁荣，共同建设多资多彩的美好家园。
                        </div>
                     </div>
                     <div class="swiper-scrollbar"></div>
                  </div>
            </div>
         <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Vertical Slide 3</p>
         </div>
         <div class="swiper-slide">Vertical Slide 4</div>
      </div>
</div>

      <script>
         var mySwiper = new Swiper ('.swiper-container', {
               direction: 'vertical',
            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
         },
         onSlideChangeEnd: function(swiper){
         swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
         })
      </script>
      <script>
         var swiperV = new Swiper('.swiper-container-v', {
         direction: 'vertical'
         });

         var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
            scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
            direction: 'vertical',
            slidesPerView: 'auto',
            mousewheelControl: true,
            freeMode: true,
            nested: true
         });
      </script>
</body>
</html>

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)