jquery - 动画最后闪烁

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 中的这一行，一切都会正常工作

.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 中测试。删除上述动画即可解决问题。