一种简单的思路实现进场动画，类swiper.animate功能

阿海

当页面数量多，每一页的动画效果很多的时候，用swiper.animate即使在PC上的chrome浏览，也感觉到卡，直接写一个简单的来处理，使用方法很简单直接在标签里面增加设定：class="ani" data-animate="bounceInLeft" data-animate-duration="1s" data-animate-delay="0.2s"

1.     function do_animate(){
   
2. 
   
3.         // 清理其他页面的动画设定
   
4.         $(".swiper-slide .isanimate").each(function(index, el) {
   
5.             var $el = $(el);
   
6.             var animate = $el.data('animate');
   
7.             $el.removeClass(animate).removeClass('isanimate').css('opacity', '0');;
   
8.         });
   
9. 
   
10.         // 对当前页面的所有动画效果进行设定
    
11.         $(".swiper-slide-active .ani").each(function(index, el) {
    
12.             var $el = $(el);
    
13.             var duration = $el.data('animate-duration');
    
14.             var delay = $el.data('animate-delay');
    
15.             var animate = $el.data('animate');
    
16.             $el.css({
    
17.                 'opacity':'1',
    
18.                 'animation-duration': duration,
    
19.                 '-webkit-animation-duration': duration,
    
20.                 'animation-delay':delay,
    
21.                 '-webkit-animation-delay':delay
    
22.             }).addClass(animate).addClass('isanimate');
    
23.         });
    
24.     }
    
25.     // Swiper 启用
    
26.     window.mySwiper = new Swiper ('.swiper-container', {
    
27.         // Optional parameters
    
28.         // direction: 'vertical',
    
29.         // initialSlide :2,
    
30.         // effect : 'fade',
    
31.         loop: false,
    
32.         onSlideChangeEnd: function(){
    
33.             do_animate();
    
34.         },
    
35.         onInit: function(swiper){
    
36.             // 如果css里面没有手动设定动画对象的opacity为0，就在这里一次性搞定
    
37.             $(".swiper-slide .ani").css('opacity', '0');
    
38.         }
    
39.     });

复制代码

lesliehuang

欢迎收藏我们，在这里您可以查到最新最快的彩票开奖信息，更有：幸运时时彩，天津时时彩，十一运夺金等丰富彩种，而且免费提供每期的玩法给大家参考.