如何為我的案例在響應式設計中創建動畫？

Question

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

我需要為我的應用設計一個響應式設計。”

' 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) {