Question

我试图在我的应用程序中为我的视图实现转换。我有一个单独的容器用于我的视图，我希望在更改视图时有一个很好的幻灯片效果，一个方向，如果用户按下则另一个方式。

我在http://embed.plnkr.co/p7WZdsy0FznV3zo7VWjU/preview找到了一个示例并试图让它发挥作用，但结果并不像我预期的那样，请看这里：http://codepen.io/anon/pen/jPVdaE我无法让它发挥作用。

HTML

<html lang="en" ng-app="TestApp">
  <head>
  </head>
  <body layout="column" ng-controller="App">
    <md-toolbar layout="row" class="toolbar" ng-class="{'md-tall': expanded}">
      <h1 class="md-toolbar-tools">Title</h1>
    </md-toolbar>
    <div class="container" ng-class="direction">
      <div class="content" ui-view></div>
    </div>

    <script type="text/ng-template" id="home.html">
      <h3>Page 1 / Home</h3>
      <a href="#/products">Page 2</a>
      <a href="#/products/category">Page 3</a>
    </script>

    <script type="text/ng-template" id="products.html">
      <h3>Page 2 / Products</h3>
      <button ng-click="back()">Back</button>
      <a href="#/products/category">Page 3</a>
    </script>

    <script type="text/ng-template" id="category.html">
      <h3>Page 3 / Products/Category</h3>
      <button ng-click="back()">Back</button>
      <a href="#/products">Page 2</a>
    </script>
  </body>
</html>

CSS

.container {
  position:relative;
  height:100%;
  background:#eee;
  overflow:hidden;
}

.content {
  padding:25px 50px;
}

.content.ng-enter, .content.ng-leave {
  transition:all ease-in-out 1s;
  display:block;
  width:100%;
  position:absolute;
}

.left .content.ng-enter {
  transform: translateX(100%);
}
.left .content.ng-enter.ng-enter-active {
  transform: translateX(0);
}
.left .content.ng-leave.ng-leave-active {
  transform: translateX(-100%);
}

.right .content.ng-enter {
  transform: translateX(-100%);
}
.right .content.ng-enter.ng-enter-active {
  transform: translateX(0);
}
.right .content.ng-leave.ng-leave-active {
  transform: translateX(100%);
}

JS

(function() {
  angular
    .module('TestApp', ['ngMaterial', 'ui.router']);
})();

(function() {
  angular
    .module('TestApp')
    .config(Config);

  Config.$inject = ['$stateProvider', '$urlRouterProvider'];

    function Config($stateProvider, $urlRouterProvider) {
        // Routes
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('index', {
                url: '/',
                templateUrl: 'home.html',
                depth: 0
            })
            .state('products', {
                url: '/products',
                templateUrl: 'products.html',
                depth: 1
            })
            .state('category', {
                url: '/products/category',
                templateUrl: 'category.html',
                depth: 2
            });
  }
})();

(function() {
  angular
    .module('TestApp')
    .run(Run);

  Run.$inject = ["$rootScope", "$window"];

    function Run($rootScope, $window) {
        $rootScope.direction = 'right';

        $rootScope.$on('$stateChangeStart', onStateChangeStart);

        function onStateChangeStart(event, toState, toParams, fromState, fromParams) {
            $rootScope.direction = 'left';

            if (fromState && toState && (fromState.depth > toState.depth)) {
                $rootScope.direction = 'right';
            }

      $rootScope.back = function() {
        $window.history.back();
      }
        }
    }
})();

(function() {
  angular
    .module('TestApp')
    .controller('App', App);

  App.$inject = ['$scope'];

  function App($scope) {
    $scope.expanded = false;

    $scope.expand = function() {
      $scope.expanded = !$scope.expanded;
    }
  }
})();

感谢您的时间。

角度视图幻灯片过渡不起作用

0 个答案: