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

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

所以我尝试将ui-router与ng-animate放在一起。路由就像魅力一样。然而，ng-animate踉踉跄跄地开始。根据我一直在阅读的所有示例和文档，ui-view 容器应该被复制，但它不会发生。相反，容器的内部 HTML 被替换。我还使用一个名为 animate 的外部动画库.css

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

这是一个 plunkr 演示

视图1：

<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);
         });
     }
 ]);

索引.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>

任何帮助，不胜感激。

您需要为slideInRight和slideOutLeft添加一些动画定义

可以使用动画.css库。

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

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

演示

相关内容

最新更新

热门标签：