触发CSS3转换的JavaScript函数不起作用

Question

您好，我的transition 在按下按钮时会被调用。我感到困惑的原因是因为它以前工作过，但后来我把它移到了另一个 div 上，现在不行了？当我的意思是它不工作时，我的意思是该函数工作（因为它确实做某事）然后运行回调，但是当它切换类时它不会“动画”它。 div 只是停留在那里直到动画时间结束，然后运行隐藏它的回调。

所以基本上它只是隐藏它，但没有动画它应该做的滑出效果。

switchClass 的其余功能即使是让页面滑回的功能也能正常工作。

无法正常运行的代码：

function hidepage() {
        $( ".PageShow" ).switchClass("PageShow", "PageHide", loadpanel);
// Alternative $( "PageContainer" ).switchClass("PageShow", "PageHide", loadpanel);
    };

以及随之而来的其余代码......

CSS：

#PageContainer {
   margin-top:120px;
   width:100%;
}

.PageShow {
   position:fixed;
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -webkit-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

.PageHide {
   position:fixed;
   -webkit-transform:translate(-100%,0px);
   -moz-transform:translate(-100%,0px);
   -ms-transform:translate(-100%,0px);
   -o-transform:translate(-100%,0px);
   transform:translate(-100%,0px);
   transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

Answer 1

如果您将方法 .switchClass() 更改为 .removeClass() 和 .addClass()，它将起作用。看看这个jsFiddle。有两个函数，一个叫做.hidepage()，一个是.removeClass和.addClass，第二个函数是.hidepagetwo()，它使用.switchClass()

真正的错误是：最后缺少});，至少在 jsFiddle 中，添加此代码后您的代码可以工作。

Answer 2

看起来您使用 switchClass 不正确。这是 API 文档：

http://api.jqueryui.com/switchClass/

请注意，该方法需要 2 个强制参数和 3 个可选参数。您不能将加载面板（如果那是您的回调函数）填充到第三个参数中，因为它属于第五个。在这种情况下，您需要指定第 3 和第 4 的值，以便您的回调函数在预期的位置结束。

另外，你有很多 CSS 过渡的东西，但我的理解是 switchClass 在你的两个类之间做一个 javascript 动画。查看上面链接中的示例。您只需要在一个类中指定前样式，在另一个类中指定后样式。 switchClass 将在中间插入并在没有所有 CSS 转换的情况下执行动画。

既然你已经在类上放置了所有这些 CSS 动画，另一种方法是尝试 jQuery 的 toggleClass，它只是打开/关闭类：http://api.jquery.com/toggleClass/