查看: 2033|回复: 1

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

[复制链接]

该用户从未签到

1

主题

2

帖子

44

积分

新手上路

Rank: 1

积分
44
发表于 2016-8-10 11:20:37 | 显示全部楼层 |阅读模式
本帖最后由 阿海 于 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(){

  2.         // 清理其他页面的动画设定
  3.         $(".swiper-slide .isanimate").each(function(index, el) {
  4.             var $el = $(el);
  5.             var animate = $el.data('animate');
  6.             $el.removeClass(animate).removeClass('isanimate').css('opacity', '0');;
  7.         });

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


回复

使用道具 举报

该用户从未签到

0

主题

9

帖子

27

积分

新手上路

Rank: 1

积分
27
发表于 2020-5-5 09:46:38 | 显示全部楼层
欢迎收藏我们,在这里您可以查到最新最快的彩票开奖信息,更有:幸运时时彩天津时时彩十一运夺金等丰富彩种,而且免费提供每期的玩法给大家参考.

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2020-12-1 07:39 , Processed in 0.073843 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表