我正在尝试让 Animsition 插件在 Angular 项目中运行。 加载程序卡住， View 未加载。
jQuery 插件在一个指令中，作为单独的 HTML 文件工作，没有 Angular 路由。但我想让它与 Angular Router 一起工作。
//在指令中，默认值是:
loadingParentElement : 'body',
overlayParentElement : 'body',
(并且它在没有路由器的情况下工作正常 + 将带有 head/body/script 标签的完整 html 文件分离到源。但是作为单独的 View ，我将每个 View 更改为具有父主要元素，假设它们充当父主体元素。但仍然没用。
应用程序.js
var app = angular.module('MyApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'AppCtrl',
})
.when('/work', {
templateUrl: 'partials/work.html',
controller: 'AppCtrl',
})
.otherwise({
redirectTo: '/'
});
});
// the directive
app.directive('ngAnimsition', [function() {
return {
restrict: 'A',
scope: {
'model': '='
},
link: function(scope, elem, attrs) {
var $animsition = $(elem);
$animsition.animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'main', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'main',
transition: function(url) {
window.location.href = url;
}
});
}
}
}]);
index.html 文件
<!DOCTYPE html>
<html class="no-js" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Getting Animsition jQuery + Angular Router</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-controller="AppCtrl">
<!-- ng-router -->
<div ng-view></div>
<!-- tried below, but only does animsition on first load, not changing between views -->
<!-- <div ng-animsition class="animsition">
<!-- <div ng-view></div>
<!-- </div>
<!-- jquery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-router.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
部分home.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="active animsition-link">Home</a>
<a ng-href="#/work" class="animsition-link">Work</a>
</nav>
<div>
<h1>Home</h1>
</div>
</div>
</main>
部分作品.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="animsition-link">Home</a>
<a ng-href="#/work" class="active animsition-link">Work</a>
</nav>
<div>
<h1>Work</h1>
</div>
</div>
</main>
最佳答案
我也遇到了这个问题，我用这段代码解决了，你可以试试
transition: function(url){
if(url){
window.location.href = url;
}
else{
location.reload();
}
}
关于angularjs - jQuery 插件不适用于 Angular Router (Animsition)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36830303/