0

I want to make loading page everytime i go to another page, so i want to use animsition, but it doesn't load the view When i see the url, at first it already change to localhost/home --> localhost/product, but suddenly it will reload again and go to home.

Code

myApp.directive('animsition', function($location,$timeout){
$(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 10,
    outDuration: 10,
    // linkElement:   '.animsition-link',
    linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([class*="lg-trigger"]):not([socialshare])', 
    loading: true,
    loadingParentElement: 'body',
    loadingClass: 'animsition-loading',
    loadingInner: '<img src="images/loading.gif" />', // e.g '<img src="assets/img/loading.svg" />'
    timeout: false,
    timeoutCountdown: 4000,
    onLoadEvent: true,
    browser: ['animation-duration', '-webkit-animation-duration', '-o-animation-duration'], 

    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){
            window.location.href = url; 
    }
});

ui.router

  .state('home',{
    url:'/home',
    params:{opacity:null,headnav_status:null,no_login:null},
    templateUrl:'home.html',
    controller:'HomeCtrl'
  })

  .state('product',{
    url:'/product',
    params:{product_id:null},
    templateUrl:'product.html',
    controller:'ProductCtrl'
  })

click function

$scope.gotoProduct = function(product_id) {
    $state.go('product', { product_id: product_id});
}

  <a ng-click="gotoProduct(id)">Product </a>

Anyone have any idea why?

Thank you

beginnerprogrammer
  • 498
  • 3
  • 14

1 Answers1

1

Found it!

I add this code into animsition directive

transition: function(url){ 
    if(url){
        window.location.href = url;
    }
    else{   
        location.reload();
    }
}

And it work properly, hope it help anyone who need animsition in their angular apps~

beginnerprogrammer
  • 498
  • 3
  • 14