浮动元素上的CSS3转换

我想复制苹果的搜索页面，其中当您单击筛选结果动画到他们的下一个位置，而不是跳转到它。我希望这样做可以让结果更加清晰。浮动元素上的CSS3转换

这是我的尝试，但我不认为这可以纯粹在CSS中完成？我曾尝试向所有事件添加一个转换，但似乎不起作用。我认为苹果公司正在使用一种转换来改变这一立场，但我无法看到如何。任何帮助将非常感激。由于

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

来源

2013-10-26 2ne

了jQuery插件砌筑可能是真正有用的位置：http://masonry.desandro.com/ – DMTintner

我过去曾经使用过，但对于这种情况有点矫枉过正 – 2ne

，如果我理解你的问题，但如果你问腾出工具栏当您单击切换按钮，这样的事情我不是希雷可以工作，而不是完美的解决方案，但它的工作。对结果和切换在过滤器这样

动画宽度：

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

http://jsfiddle.net/Twrst/

来源

2013-10-27 18:41:02 Legarndary

浮动元素上的CSS3转换

回答

相关问题