如何在我的情況下在響應式設計中創建動畫？

Question

我有一個奇怪的錯誤鉻，我需要你們幫助。

我需要爲我的應用程序提供響應式設計。'

'item'的寬度將根據瀏覽器的寬度而改變。當chrome第一次加載頁面時，寬度會相應改變。但是，在點擊'item'並運行動畫之後，即使調整了瀏覽器的大小，'item'的寬度也不會改變。我覺得這是Chrome上的動畫問題。它在FF中正常工作，但不是Chrome。任何人有什麼好的建議？非常感謝！

http://jsfiddle.net/7kvX2/3/

HTML

<div id="wrapper"> 
    <div class='item'>test 1</div> 
    <div class='item'>test 2</div> 
    <div class='item'>test 3</div> 
</div> 

CSS

.item{ 
    display:inline-block; 
    background-color:yellow; 
} 

.open{ 
    -webkit-animation: openMenu 1s; 
    animation:openMenu 1s; 
} 

.close{ 
    -webkit-animation: closeMenu 1s; 
    animation:closeMenu 1s; 
} 

@media (min-width: 800px) and (max-width: 1000px) { 
    .item{ 
     width:105px; 
    } 

    @-webkit-keyframes openMenu{ 
     from {width: 105px;} 
     to {width: 170px;} 
    } 

    @keyframes openMenu{ 
     from {width: 105px;} 
     to {width: 170px;} 
    } 

    @-webkit-keyframes closeMenu{ 
     from {width: 170px;} 
     to {width: 105px;} 
    } 
    @keyframes closeMenu{ 
     from {width: 170px;} 
     to {width: 105px;} 
    } 
} 


@media (min-width: 400px) and (max-width: 800px) { 
    .item{ 
     width:75px; 
    } 

    @-webkit-keyframes openMenu{ 
     from {width: 75px;} 
     to {width: 100px;} 
    } 

    @keyframes openMenu{ 
     from {width: 75px;} 
     to {width: 100px;} 
    } 

    @-webkit-keyframes closeMenu{ 
     from {width: 100px;} 
     to {width: 75px;} 
    } 
    @keyframes closeMenu{ 
     from {width: 100px;} 
     to {width: 75px;} 
    } 
} 

JS

$('.item').click(function(){ 
    if($(this).hasClass('open')){ 
     $(this).addClass('close').removeClass('open'); 

    }else{ 
     $(this).addClass('open').removeClass('close'); 
    } 
}) 

Answer 1

小提琴：http://jsfiddle.net/7kvX2/4/

你的斷點是有點關閉，只有當你完全落在中間時纔有用。

我刪除在所述第一媒體查詢上約束：

@media (min-width: 800px){ 

地的低約束較小，並設置在所述第二媒體查詢的第二個參數799：

@media (min-width: 100px) and (max-width: 799px) {