动画结尾闪烁答案

【问题标题】：Animation flickering at the end动画结尾闪烁
【发布时间】：2013-01-24 15:29:43
【问题描述】：

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

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

第二个是我试图让 UL 与 .有没有办法改变 animate 函数使其添加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 - 点击“过滤器”。

【问题讨论】：

我似乎看不到任何闪烁。也许是特定于浏览器的？
Chrome，但我通过删除 CSS 过渡来修复它（我忘了 jQuery animate 不需要它。）
将float:left; 添加到.filter .toggle 和.filter ul
你治愈了自己:)

标签： jquery css animation width

【解决方案1】：

动画和 CSS 过渡之间存在冲突。如果您删除 CSS 过渡规则，它似乎可以在没有闪烁的情况下工作（特别是 width 规则上的过渡）。

如果您出于其他原因仍需要过渡，请更具体地说明哪些过渡。我无法根据 CSS 判断，但类似：

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

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

【讨论】：

【解决方案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 中测试。去掉上面的动画就可以解决问题了。

【讨论】：