Swiper中文论坛

标题: 一种简单的思路实现进场动画，类swiper.animate功能 [打印本页]
作者: 阿海    时间: 2016-8-10 11:20
标题: 一种简单的思路实现进场动画，类swiper.animate功能
本帖最后由 阿海 于 2016-8-10 11:21 编辑

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

  1.     function do_animate(){

  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.         });

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





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