У меня есть «индексная» страница со списком и некоторыми вариантами выбора, а затем внеэкранный div справа, который содержит контент, специфичный для текущего выбора (сокращенно от страницы «показать»). Когда нажимается кнопка, я хочу, чтобы «индексная» половина отображаемого на экране 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).