Animsition在angular ui-router中不能很好地工作

Question

我想在每次转到另一个页面时加载页面，所以我想使用animsition，但当我看到url时它不会加载视图，一开始它已经更改为localhost/home --> localhost/product，但突然它又会重新加载并转到home。

代码

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'
  })

单击函数

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

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

有人知道为什么吗？

谢谢

Answer 1

找到了！

我将这段代码添加到动画指令中

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

它工作正常，希望它能帮助任何需要动画的人在他们的角度应用程序~