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

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

1 个答案: