Question

我试图让Animsition插件在Angular项目中运行。 加载程序卡住，视图无法加载。

jQuery插件在一个指令中，并作为单独的HTML文件工作，没有Angular路由。但是我想让它与Angular Router一起工作。

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

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

（并且它没有路由器+单独的完整html文件与head / body / script标签到源。但是作为单独的视图，我将每个视图更改为具有父主要元素，假设它们充当父体元素。但仍然没有工作。

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>

Answer 1

我也遇到了这个问题，并且通过使用此代码使其工作，您可以尝试它

TimerTask tasknew = new TimerScheduleFixedRateDelay();
Timer timer = new Timer();

// scheduling the task at fixed rate delay
timer.scheduleAtFixedRate(tasknew,500,1000);      
}
// this method performs the task
public void run() {
//Do your task here in runOnUiThread(); 
}

jQuery插件不使用Angular Router（Animsition）

1 个答案: