如何使用ngAnimate滑动div及其所有内容？

Question

What I have is an 'index' page with a list and some selections, and then an off-screen div to the right which contains content specific to the current selection (a short of 'show' page). 我所拥有的是一个带有列表和一些选择的“索引”页面，然后是右侧的屏幕外div，其中包含特定于当前选择的内容（“显示”页面的简称）。 When a button is clicked, I want the 'index' half of the div that's on-screen to slide out of view, and the 'show' half of the div to slide into view (so the entire div slides left). 单击按钮时，我希望屏幕上的div的“索引”一半滑出视图，而div的“显示”一半滑入视图（因此整个div都向左滑动）。

To do this in jQuery, as a temporary workaround, I have written the following: 为了在jQuery中做到这一点，作为一种临时的解决方法，我编写了以下内容：

slideInContent = function () {
    $('#main')
        .animate({'margin-left':'-=100vw'}, 500, 'linear');

},
backToCover = function () {
    $('#main')
        .animate({'margin-left':'+=100vw'}, 500, 'linear');
},

HTML: HTML：

<div id='main'>
  <div id='index'>
    ...
  </div>
  <div id='show'>
    ...
  </div>
</div>

CSS: CSS：

#index {
  float: left;
}

#show {
  width: 100vw;
  height: auto;
  margin-left: 50%;
  display: inline-block;
}

#main {
  width: 200vw;
  overflow-y: scroll;
}

How do I do this with Angular (I'm supposing it's going to be in the ngAnimate module somewhere). 我该如何使用Angular做到这一点（我想它将在某个位置的ngAnimate模块中）。

Answer 1

this is how i did it, you'll need ngRoute and ngAnimate . 这就是我的方法，您需要ngRoute和ngAnimate 。 I also used Bootstrap and Animate.css : 我还使用了Bootstrap和Animate.css ：

We use CSS to animate the view as it .ng-enters the view and .ng-leaves . 我们使用CSS对视图进行动画处理，因为.ng-enters视图和.ng-leaves 。

 <style>
  .main-view.ng-enter,
  .main-view.ng-active {
   animation: slideInRight 1s ease;
   -webkit-animation: slideInRight 1s ease;
   -moz-animation: slideInRight 1s ease;
   -o-animation: slideInRight 1s ease;
  }

  .main-view.ng-leave {
   display: none;
  }
 </style>

HTML 的HTML

<body ng-app="storeApp" ng-controller="StoreCtrl">

 <section id="store">

  <div class="col-xs-3" id="store-categories">
     <a ng-repeat="category in categories" class="btn btn-default btn-block" ng-href="#{{category}}">{{category}}</a>
  </div><!-- end col-xs-3 -->

  <div class="overflow-wrapper">
   <div class="col-xs-9" id="store-items">
    <div class="main-view" ng-view></div>
   </div><!-- end store-items -->
  </div>

 </section><!-- end store -->

 <!-- Vendor JS -->
 <script src="vendors/angular.min.js"></script>
 <!-- Deps -->
 <script src="vendors/angular-animate.min.js"></script>
 <script src="vendors/angular-route.min.js"></script>

 <!-- App.js -->
 <script>
  angular.module('storeApp', ['ngAnimate', 'ngRoute'])

  .config(['$routeProvider', function($routeProvider) {
   $routeProvider

   .when('/', {
    redirectTo: '/category1'
   })

   .when('/category1', {
    templateUrl: 'js/views/category-1/index.html',
    activetab: 'category1'
   })

   .when('/category2', {
    templateUrl: 'js/views/category-2/index.html',
    activetab: 'category2'
   })

  }])

  .controller('StoreCtrl', ['$scope', function($scope) {

   $scope.categories = ['category1', 'category2'];

  }]);
 </script>

</body>

如何使用ngAnimate滑动div及其所有内容？

问题描述

1 个解决方案

解决方案1
1 2015-08-22 01:35:55

如何使用ngAnimate滑动div及其所有内容？

问题描述

1 个解决方案

解决方案1 1 2015-08-22 01:35:55

解决方案1
1 2015-08-22 01:35:55