Question

我当然希望你们能告诉我哪里出错了。

所以我尝试将ui-router与ng-animate放在一起。路由就像魅力一样。但是，ng-animate会蹒跚而行。根据我所阅读的所有样本和文档，ui-view容器应该重复，但不会发生。相反，容器的innerHTML被替换。我还使用了一个名为animate.css的外部动画库

所以我把一个笨蛋放在一起，希望你们中的一些人可以帮助我。

Here is a plunkr demo

厂景：

<section class="view1" >
<h1>VIEW 1</h1>
<a ui-sref="view2">view2</a>
</section>

视图2：

<section class="view2" >
<h1>VIEW 2</h1>
<a ui-sref="view1">view1</a>
</section>

样式：

 body {
   width: 100%;
 }

 .view-container {
   width: 100%;
 }

 .view-container.ng-enter .view1,
 .view-container.ng-enter .view2,
 .view-container.ng-leave .view1,
 .view-container.ng-leave .view2 {
   position: absolute;
   left: 30px;
   right: 30px;
   transition: 0.5s all ease;
   -moz-transition: 0.5s all ease;
   -webkit-transition: 0.5s all ease;
 }

 .view-container.ng-enter .view1,
 .view-container.ng-enter .view2 {
   -webkit-animation: slideInRight 0.5s both ease;
   -moz-animation: slideInRight 0.5s both ease;
   animation: slideInRight 0.5s both ease;
 }

 .view-container.ng-leave .view1 .view-container.ng-leave .view2 {
   -webkit-animation: slideOutLeft 0.5s both ease;
   -moz-animation: slideOutLeft 0.5s both ease;
   animation: slideOutLeft 0.5s both ease;
 }

 .view1,
 .view2 {
   width: 100%;
   height: 300px;
   border: 2px solid red;
 }

 .view2 {
   border: 2px solid green;
 }

脚本：

     'use strict';

 var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']);
 mainModule.config(["$stateProvider", "$urlRouterProvider",
     function($stateProvider, $urlRouterProvider) {

         $stateProvider
             .state('view1', {
                 url: '/view1',
                 templateUrl: 'view1.html',
             }).state('view2', {
             url: '/view2',
             templateUrl: 'view2.html',
         });

         $urlRouterProvider.otherwise('/view1');
     }
 ]);

 mainModule.run(["$rootScope", "$state",
     function($rootScope, $state) {

         $rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) {
             console.log(endState);
         });

         $rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) {
             console.warn(startState);
             console.warn(endState);
         });
     }
 ]);

的index.html：

     <!DOCTYPE html>
 <html>

   <head>

     <link rel="stylesheet" href="style.css" />
   </head>

   <body data-ng-app="poc">
     <div ui-view="" class="view-container"></div>
     <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js@1.4.9"></script>
     <script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="angular-animate@*"></script>
     <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
     <script src="script.js"></script>
   </body>

 </html>

感谢任何帮助。

Answer 1

您需要为slideInRight和slideOutLeft

添加一些动画定义

可以使用animate.css库。

对于初学者，我建议将动画选择器移动到<ui-view>元素

实际发生的事情是当检测到转换时间时......将克隆元素，允许一次转换为2个...一个进入，一个离开。您可以在浏览器开发工具中的实时html中看到这一点

的 DEMO

ui-router如何使用ng-animate？

1 个答案: