0

编辑：通过删除 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>

这是一个小提琴- 点击“过滤器”。

4

2 回答 2

0

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

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

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

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

于 2013-02-08T19:25:17.323 回答
0

去掉 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 中测试。删除上面的动画只会解决问题。

于 2013-02-08T19:27:18.240 回答