javascript - 浮动元素上的 CSS3 过渡

Question

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

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

苹果结果页面

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

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

在结果上设置宽度并在过滤器上切换，如下所示：

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

http://jsfiddle.net/Twrst/