javascript - 在 Chrome 中设置动画时隐藏的 Angular 落变得可见

Question

我有一个 ul 和 border-radius: 10px; overflow:hidden 里面有多个 li。

通常，ul Angular 隐藏了内部内容。但在 Chrome 中，当使用 jQuery 为 li 设置动画(淡化)时，在动画期间，li Angular 变得可见。

动画完成后，li 的 Angular 将恢复隐藏状态。

我能做些什么来防止这种情况发生？

这只发生在 Webkit 浏览器中:Chrome 和 Safari。

HTML :

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS:

ul {
    border-radius: 10px;
    overflow: hidden;
}

Answer 1

你可以试试这个:

// give specific border-radius to first ans last li
$('li:first').css('border-radius', '0 10px 0 0');
$('li:last').css('border-radius', '0 0 10px 0');

注意您也可以使用 CSS

DEMO shows a sample animation