Я пытаюсь реплицировать страницу поиска Apple, в которой, когда вы нажимаете фильтры, результаты ожидают их следующую позицию, а не просто прыгают на нее. Я хочу сделать это, чтобы уточнить, к чему идут результаты.
Это моя попытка, но я не думаю, что это можно сделать исключительно в css? Я попытался добавить переход ко всем событиям, но он не работает. Я думаю, что Apple использует преобразование для перемещения позиции, но я не могу видеть, как это сделать. Любая помощь приветствуется. благодаря
<button>toggle filters</button>
<div class="resource">
<div class="results">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="filter"></div>
</div>
.resource {
width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.resource > * {
transition: all 1s ease;
}
.results {
width: 1000px;
background: red;
height: 500px;
}
.results div {
background: green;
float: left;
height: 200px;
width: 240px;
margin-right: 10px;
margin-bottom: 10px;
}
.filter-active .results {
width: 750px;
}
.filter {
width: 250px;
background: blue;
height: 500px;
position: absolute;
top: 0;
right: -250px;
}
.filter-active .filter {
right: 0;
}
var filtertoggle = $(".resource");
$('button').click(function(){
filtertoggle.toggleClass('filter-active');
});
Im не shire если я понимаю вас вопрос, но если вы спрашиваете о том, чтобы освободить место для панели инструментов, когда вы нажимаете кнопки переключения, что-то вроде этого может работать, а не идеальное решение, но оно работает.
анимируйте ширину по результатам и переключите фильтр следующим образом:
$('button').click(function() {
var toggleWidth = $(".results").width() == 300 ? "200px" : "300px";
$('.filter').toggle('slow');
$('.results').animate({width: toggleWidth});
});