Skip to content

wxforever/mobile-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

#手机滑动切换效果,动画自定义

###使用方法

1、引入slider.js 2、添加滑动动画css3效果,例如

@keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.6, .6, .6);
        transform: scale3d(.6, .6, .6);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
      -webkit-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

3、new一个新的Slider

 var slider= new Slider('.slider-item','zoomIn');

//slider-item为类名,代表页面,一般有多页  注意要给slider-item的父元素添加`overflow:hidden`css,因为css3动画会改变内容大小
//zoomIn为要添加的切换效果

About

a javascript plugin to use css3 animation as page change animation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published