CSS3 переход на плавающие элементы

0

Я пытаюсь реплицировать страницу поиска Apple, в которой, когда вы нажимаете фильтры, результаты ожидают их следующую позицию, а не просто прыгают на нее. Я хочу сделать это, чтобы уточнить, к чему идут результаты.

Это моя попытка, но я не думаю, что это можно сделать исключительно в css? Я попытался добавить переход ко всем событиям, но он не работает. Я думаю, что Apple использует преобразование для перемещения позиции, но я не могу видеть, как это сделать. Любая помощь приветствуется. благодаря

СТРАНИЦА РЕЗУЛЬТАТОВ APPLES

ДЕМО НА КОДЕПЕН

<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');
});
  • 0
    плагин jquery masonry может быть очень полезен здесь: masonry.desandro.com
  • 0
    Я использовал это в прошлом, но это немного излишне для этого случая
Теги:
user-interface

1 ответ

0

Im не shire если я понимаю вас вопрос, но если вы спрашиваете о том, чтобы освободить место для панели инструментов, когда вы нажимаете кнопки переключения, что-то вроде этого может работать, а не идеальное решение, но оно работает.

анимируйте ширину по результатам и переключите фильтр следующим образом:

$('button').click(function() {
   var toggleWidth = $(".results").width() == 300 ? "200px" : "300px";
   $('.filter').toggle('slow');
   $('.results').animate({width: toggleWidth});
});

http://jsfiddle.net/Twrst/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню