浮動元素上的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轉換

回答

相關問題