2

说我有课：

.box {  background:red; }
.box .mini-box { background:green; }

.box.active {  background:purple; }
.box.active .mini-box { background:yellow; }

如果我使用 css-transitions 我会简单地添加transition:all 0.5s ease;，当添加类时，active两个元素都会适当地动画。

如果我应用带有动画时间的 jQuery toggleClass（没有启用任何 css-transitions），它只会为目标元素设置动画。（即.box）。

$('.box').toggleClass('active', 500);

当我将它应用于父方法时，jquery ui 的 toggleClass 方法不会发生这种情况。有没有办法让它表现得像 CSS 转换一样？

您可以在这里看到问题：http: //jsfiddle.net/yg8rz/1/ 第二个（迷你）框没有过渡颜色。

您可以在此处看到所需的结果：http: //jsfiddle.net/yg8rz/4/ 您必须使用 webkit 浏览器才能使其工作（在本例中）。

注意：为了更好的 css 实践（倾向于没有 javascript 转换的未来），元素从祖先继承活动类而不是直接将活动类应用于任何子元素是很重要的。

此解决方案使用 javascript 也很重要，因此它适用于 ie8+

4

1 回答 1

1

您遇到的问题是由 .mini-box（从您的选择器判断）在 .box 内引起的。当您将转换应用于 .box 元素时，它会正常工作，但 .box.active .mini-box 选择器根本不会选择您的 .mini-box，因为 .box 在转换之前没有 .active 类完成。

你可以做一个这样的解决方法

HTML：

    <div class="box">normal 1</div>
    <div class="box">
        normal 2
        <div class="box mini-box">
            mini
        </div>
    </div>

CSS：

.box {  background:red; }
.box .mini-box, .box.mini-box { background:green; }

.box.active {  background:purple; }
.mini-box.active { background:yellow; }

小提琴：http: //jsfiddle.net/yg8rz/3/

您需要对 .box 和 .mini-box 元素应用过渡，我更改了 css 类，因此相同的 jQuery 代码也选择了 mini box 并将 .active 也添加到其中。

要么是这个，要么是在你的类中添加 css 转换。您可以覆盖所有（主要）浏览器：

-webkit-transition: all 0.5 ease;
-moz-transition: all 0.5 ease;
-o-transition: all 0.5 ease;
transition: all 0.5 ease;

您只能使不支持过渡的浏览器使用带有 Modernizr 的 javascript：

$(".box").toggleClass("active");
if(!Modernizr.csstransitions){
    $(".mini-box").toggleClass("active", 500);
}

http://jsfiddle.net/yg8rz/10/

于 2013-01-20T23:20:08.003 回答