Question

编辑：通过删除CSS转换来修复动画。

我实际上有两个问题。第一个是宽度动画的结尾，UL闪烁。我不确定为什么，似乎无法修复。

第二个是我正试图将UL放在同一条线上。有没有办法更改动画功能，以便添加display:inline-block而不是display:block？

// toggle filters
$(".filter .toggle").on('click', function(){
    $('.filter').find('.toggle').toggleClass('test').end()
                .find('ul').animate({width:'toggle'}, 1000);
});


.filter {
    padding-left:25px;
    padding-bottom:10px;
    width:500px;
}

.filter * {
    -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
}

.filter .toggle.test {
    padding:7px;
    color:#eee;
    background-image: linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -o-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -moz-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -webkit-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -ms-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    font-size:15px;
    border-radius:5px 0 0 5px;
}

.filter .toggle {
    font-size:11px;
    border-radius:5px;
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
    background:rgba(255,255,255,0.8);
    padding:4px;
    line-height:14px;
}
    .filter .toggle:before {
        font-family:icon;
        content:'\f0c9';
        padding-right:5px;
        color:#888;
    }

.filter ul {
    display:none;
    height:18px;
    vertical-align:top;
    overflow:hidden;
    background:white;
}

.filter li {
    display:inline-block;
    padding-right:10px;
    font-size:16px;
}

<div class="filter">
   <span class="toggle">Filters</span>
   <ul>
     <li class="active">All</li>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
  </ul>
</div>

此处为a fiddle - 点击“过滤器”。

Answer 1

动画与CSS过渡之间存在冲突。如果删除CSS转换规则，它似乎没有闪烁（特别是width规则的转换）。

如果由于其他原因仍然需要转换，请更具体地说明哪些转换。我不能基于CSS来判断，但是像：

transition: border-radius .2s linear, padding .2s linear;

顺便说一下，此时您可能只需要-webkit和非供应商。

Answer 2

在你的CSS中摆脱这一行，一切都应该正常工作

.filter * {
-webkit-transition: all 0.2s linear 0;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

顺便说一下，这是一个特定于浏览器的问题。它影响Chromium（可能是Webkit），但不影响Firefox或Opera。无法在IE和Safari中测试。删除上述动画只会解决问题。

动画最后闪烁

2 个答案: