Как мне вставить div и все его содержимое, используя ngAnimate?

Question

Как мне вставить div и все его содержимое, используя ngAnimate?

0

У меня есть страница "index" со списком и некоторыми выборами, а затем справа от экрана, который содержит контент, специфичный для текущего выбора (не на странице "показать"). Когда нажимается кнопка, я хочу, чтобы "индекс" половину div, который на экране выходил из поля зрения, и "показать" половину div, чтобы вставить в поле зрения (так что весь div скользит влево).

Для этого в jQuery, как временном обходном пути, я написал следующее:

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

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

HTML:

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

CSS:

#index {
  float: left;
}

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

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

Как это сделать с помощью Angular (я предполагаю, что это будет где-то в модуле ngAnimate).

josiah 22 авг. 2015, в 03:26

Источник

Теги:

javascript

angularjs

slide

fullscreen

ng-animate

1 ответ

Ещё вопросы

SuperVeetz · Answer 1 · 2015-08-21T22-41-00.000Z

вот как я это сделал, вам понадобятся ngRoute и ngAnimate. Я также использовал Bootstrap и Animate.css:

Мы используем 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

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

Это не совсем отражает то, что я имел в виду. #main - это div, содержащий #index и #show . Div #index - это ширина и высота 100vw / vh, как и div #show . #show начинается вне экрана, но когда пользователь нажимает на выделение, страница #index заметно обновляет свой фон ( #index его как титульную страницу) и #show незаметно обновляет свое содержимое. Когда пользователь нажимает кнопку, #main скользит влево, чтобы скрыть #index и открыть #show .
показать некоторые HTML всегда пожалуйста!