触发 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 中你的代码在添加它之后可以正常工作。