文章/答案/技术大牛

发布

社区首页 >问答首页 >不使用角路由器的jQuery插件(动画)

问不使用角路由器的jQuery插件(动画)
EN

Stack Overflow用户

提问于 2016-04-25 00:02:08

回答 1查看 1.1K关注 0票数 3

我试图让动画插件在一个角度的项目中工作。加载程序卡住了，视图没有加载.

jQuery插件在一个指令中，作为独立的HTML工作，没有角路由。但我想让它和角速度路由器一起工作。

//在该指令中，默认值为：

loadingParentElement : 'body',
overlayParentElement : 'body',

(没有路由器+分离完整的html文件和头/正文/脚本标记到源代码，它工作得很好。但作为单独的视图，我将每个视图更改为具有父主元素，假设它们充当父主体元素。但还是没用。

app.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>

部分work.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>

ngroute

animsition

angularjs

jquery-plugins

回答 1

Stack Overflow用户

发布于 2017-07-11 05:03:16

我也遇到了这个问题，通过使用这段代码，你可以试一试。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36830303

复制

相似问题

问不使用角路由器的jQuery插件(动画)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用角路由器的jQuery插件(动画)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用角路由器的jQuery插件(动画)
EN