angualr 單頁面跳轉（仿weui切換動畫）

$scope.$on('$locationChangeStart', function(event, next, current) {

setTimeout(function() {

var hash = window.location.hash;

if(current == next){

if(hash == '#/'){

$scope.pageClass = '';

}

states = JSON.parse(sessionStorage.getItem('hash')) || ['#/'];

}else{

if(states.indexOf(hash) == -1) {

$scope.pageClass = 'a-fadeinR';

states.push(hash);

} else {

$scope.pageClass = 'a-fadeinL';

states.pop(hash)

}

sessionStorage.setItem('hash',JSON.stringify(states))

}

})

});

 

 

 

 

//切換動畫

 

@-webkit-keyframes fadeinR{

    0%{opacity:1;-webkit-transform:translateX(150px);}

    100%{opacity:1;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinR{

    0%{opacity:1;-moz-transform:translateX(150px);}

    100%{opacity:1;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinR{

    0%{opacity:1;-ms-transform:translateX(150px);}

    100%{opacity:1;-ms-transform:translateX(0);}

}

@keyframes fadeinR{

    0%{opacity:1;transform:translateX(150px);}

    100%{opacity:1;transform:translateX(0);}

}

.a-fadeinR{

-webkit-animation:fadeinR .5s;

-moz-animation:fadeinR .5s;

-ms-animation:fadeinR .5s;

animation:fadeinR .5s;

}

 

@-webkit-keyframes fadeinL{

    0%{opacity:1;-webkit-transform:translateX(-150px);}

    100%{opacity:1;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinL{

    0%{opacity:1;-moz-transform:translateX(-150px);}

    100%{opacity:1;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinL{

    0%{opacity:1;-ms-transform:translateX(-150px);}

    100%{opacity:1;-ms-transform:translateX(0);}

}

@keyframes fadeinL{

    0%{opacity:1;transform:translateX(-150px);}

    100%{opacity:1;transform:translateX(0);}

}

.a-fadeinL{

-webkit-animation:fadeinL .5s;

-moz-animation:fadeinL .5s;

-ms-animation:fadeinL .5s;

animation:fadeinL .5s;

}