javascript - jQuery的滑动功能与CSS动画冲突

Question

我试图在一个元素上使用 slideUp 和 slideDown 函数，但是当我在同一个元素上应用 CSS 动画时似乎存在冲突。 http://jsfiddle.net/zgYNg/

在上面的示例中，我在悬停时使用了 CSS 转换，但似乎与 jQuery 的功能有冲突它似乎起作用的唯一方法是在滑动之前错误地删除类

.buggy{
        -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

Answer 1

只需在您的 css .buggy 中将所有内容更改为背景

.buggy{
        -webkit-transition: background 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -moz-transition: background 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -ms-transition: background 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -o-transition: background 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: background 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

demo