JavaScript函数触发CSS3转换不工作

JavaScript Function To Trigger CSS3 Transition not working

本文关键字：转换 工作 CSS3 函数 JavaScript      更新时间：2023-09-26

嗨，我有一个问题，我的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;
}

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

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

看起来您正在错误地使用switchClass。下面是API文档:

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

注意该方法有2个必选参数和3个可选参数。你不能把loadpanel(如果那是你的回调函数)塞进第三个参数，因为它属于第5个参数。在这种情况下，你需要为第三和第四个指定值，这样你的回调函数就会在预期的地方结束。

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

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

相关文章：