javascript - 如何为我的案例创建响应式设计中的动画？

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

fiddle :http://jsfiddle.net/7kvX2/4/

你的断点有点偏离，只有当你正好落在两者之间时才有效。

我删除了第一个媒体查询的上限:

@media (min-width: 800px){

并在第二个媒体查询中将下约束变小并将第二个参数设置为 799:

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