swiper-animate

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />
 7         <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery  -->
 8         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 9         <script src="swiper-dist/js/swiper.jquery.js"></script>
10         
11         <link type="text/css" rel="stylesheet" href="animate.min.css" />
12         <script src="swiper.animate.min.js"></script>
13         
14         <!--<script src="swiper-dist/js/swiper.js"></script>-->
15         <style>
16             .swiper-container {
17                  600px;
18                 height: 300px;
19                 background: red;
20             }  
21             .box{
22                 margin: 20px;
23                  300px;
24                 height: 80px;
25                 background: yellowgreen;
26                 font-size: 24px;
27                 text-align: center;
28                 line-height: 80px;
29                 color: #fff;
30             }
31         </style>
32     </head>
33     <body>
34         
35         <div class="swiper-container contaianer">
36             <!-- 内容部分 -->
37             <div class="swiper-wrapper">
38                 <!-- 每一页 -->
39                 <div class="swiper-slide">
40                     0
41                     <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'
42                          swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>
43                     
44                     <div class="box rollIn animated">阿萨德发士大夫撒旦</div>
45                     
46                 </div>
47                 <div class="swiper-slide">
48                     1
49                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
50                 </div>
51                 <div class="swiper-slide">
52                     2
53                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
54                 </div>
55             </div>
56         </div>
57         
58         <button onclick="btnAction()">按钮</button>
59         
60         
61         <script>     
62         //常见swiper对象
63         //参数1：swiper容器选择器，或者dom对象
64         //参数2：swiper配置项
65         var con = document.querySelector('.swiper-container');
66           var mySwiper = new Swiper(con, {
67             loop: true,
68             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
69                 swiperAnimateCache(swiper); //隐藏动画元素 
70                 swiperAnimate(swiper); //初始化完成开始动画
71             }, 
72             onSlideChangeEnd: function(swiper){ 
73                 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
74             } ,
75             onTouchEnd: function(swiper){
76                 console.log('end');
77                 swiperAnimate(swiper);
78             }
79           })   
80           
81           function btnAction(){
82 //              alert(1)
83               console.log(swiperAnimate)
84               
85               swiperAnimateCache(mySwiper);
86               swiperAnimate(mySwiper);
87               
88           }
89           
90           
91           </script>
92         
93         
94         
95         
96     </body>
97 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />
 7         <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery  -->
 8         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 9         <script src="swiper-dist/js/swiper.jquery.js"></script>
10         
11         <link type="text/css" rel="stylesheet" href="animate.min.css" />
12         <script src="swiper.animate.min.js"></script>
13         
14         <!--<script src="swiper-dist/js/swiper.js"></script>-->
15         <style>
16             .swiper-container {
17                  600px;
18                 height: 300px;
19                 background: red;
20             }  
21             .box{
22                 margin: 20px;
23                  300px;
24                 height: 80px;
25                 background: yellowgreen;
26                 font-size: 24px;
27                 text-align: center;
28                 line-height: 80px;
29                 color: #fff;
30             }
31             
32             @keyframes my-animate{
33                 from{
34                     transform: translateX(-200px) scale(0.2);
35                 }
36                 to{
37                     transform: translateX(0) scale(1);
38                 }
39             }
40             .myAni{
41                 animation-name: my-animate;
42             }
43             
44         </style>
45     </head>
46     <body>
47         
48         <div class="swiper-container contaianer">
49             <!-- 内容部分 -->
50             <div class="swiper-wrapper">
51                 <!-- 每一页 -->
52                 <div class="swiper-slide">
53                     <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'
54                          swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>
55                     
56                     <div class="box myAni animated">阿萨德发士大夫撒旦</div>
57                     
58                     <div class="box ani" swiper-animate-effect="myAni" swiper-animate-duration='1s'>阿萨德发士大夫撒旦</div>
59                     
60                 </div>
61                 <div class="swiper-slide">
62                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
63                 </div>
64                 <div class="swiper-slide">
65                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
66                 </div>
67             </div>
68         </div>
69         
70         
71         <script>     
72         //常见swiper对象
73         //参数1：swiper容器选择器，或者dom对象
74         //参数2：swiper配置项
75         var con = document.querySelector('.swiper-container');
76           var mySwiper = new Swiper(con, {
77             loop: true,
78             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
79                 swiperAnimateCache(swiper); //隐藏动画元素 
80                 swiperAnimate(swiper); //初始化完成开始动画
81             }, 
82             onSlideChangeEnd: function(swiper){ 
83                 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
84             } 
85           })   
86           
87           
88           
89           </script>
90         
91         
92         
93         
94     </body>
95 </html>