ui-router 如何与 ng-animate 一起工作？

Question

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

所以我尝试将 ui-router 与 ng-animate 放在一起。路由就像魅力一样。然而，ng-animate 开始时摇摇欲坠。根据我一直在阅读的所有示例和文档，应该复制 ui-view 容器，但它并没有发生。相反，容器的 innerHTML 被替换了。我还使用了一个名为 animate.css

的外部动画库

所以我整理了一个 plunkr，希望你们中的一些人能帮助我。

Here is a plunkr demo

view1:

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

view2:

<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> 元素

实际发生的是当检测到过渡时间时....元素将被克隆，允许 dom 中的 2 个元素同时出现...一个进入和一个离开。您可以在浏览器开发工具

中实时查看 html

DEMO

ui-router 如何与 ng-animate 一起工作？

How ui-router works with ng-animate?

javascript

angularjs

animation

angular-ui-router

ng-animate