一种简单的思路实现进场动画，类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"
function do_animate(){
// 清理其他页面的动画设定
$(".swiper-slide .isanimate").each(function(index, el) {
var $el = $(el);
var animate = $el.data('animate');
$el.removeClass(animate).removeClass('isanimate').css('opacity', '0');;
});
// 对当前页面的所有动画效果进行设定
$(".swiper-slide-active .ani").each(function(index, el) {
var $el = $(el);
var duration = $el.data('animate-duration');
var delay = $el.data('animate-delay');
var animate = $el.data('animate');
$el.css({
'opacity':'1',
'animation-duration': duration,
'-webkit-animation-duration': duration,
'animation-delay':delay,
'-webkit-animation-delay':delay
}).addClass(animate).addClass('isanimate');
});
}
// Swiper 启用
window.mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
// direction: 'vertical',
// initialSlide :2,
// effect : 'fade',
loop: false,
onSlideChangeEnd: function(){
do_animate();
},
onInit: function(swiper){
// 如果css里面没有手动设定动画对象的opacity为0，就在这里一次性搞定
$(".swiper-slide .ani").css('opacity', '0');
}
});
欢迎收藏我们，在这里您可以查到最新最快的彩票开奖信息，更有：幸运时时彩，天津时时彩，十一运夺金等丰富彩种，而且免费提供每期的玩法给大家参考.
页:
[1]