javascript - float 元素上的 CSS3 过渡

Question

我正在尝试复制 apple 的搜索页面，在该页面中，当您单击过滤器时，结果会动画显示到它们的下一个位置，而不是仅仅跳转到它。我想这样做是为了更清楚地说明结果的去向。

这是我的尝试，但我不认为这可以纯粹在 css 中完成？我已尝试为所有事件添加过渡，但它似乎不起作用。我认为 Apple 正在使用变换来移动位置，但我看不出如何。任何帮助将非常感激。谢谢

APPLES RESULTS PAGE

DEMO ON CODEPEN

<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');
});

Answer 1

如果我理解你的问题，我不是夏尔，但如果你询问在单击切换按钮时为工具栏腾出空间，这样的事情可能会起作用，不是完美的解决方案，但它会起作用。

在结果上设置动画宽度并像这样打开过滤器:

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

http://jsfiddle.net/Twrst/