У меня есть страница "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).
вот как я это сделал, вам понадобятся 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
.