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个可选参数。你不能将loadpanel（如果那是你的回调函数）填充到第3个参数中，因为它属于第5个。在这种情况下，您需要指定第3和第4的值，以便您的回调函数最终达到预期的位置。

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

由于您已经在类上安装了所有CSS动画，另一种方法是尝试jQuery的toggleClass，只需打开/关闭类：http://api.jquery.com/toggleClass/

JavaScript函数触发CSS3过渡无效

2 个答案: