使用 jQuery .addClass 和 .removeClass 进行 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21148876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition with jQuery .addClass and .removeClass
提问by Jaypee
I have a big main navigation panel that I want to animate when it's deploying (expanding).
我有一个很大的主导航面板，我想在它部署（扩展）时设置动画。
I'm working with jQuery to trigger the visibility of it by adding/removing the class visible/hidden.
我正在使用 jQuery 通过添加/删除可见/隐藏类来触发它的可见性。
I had to set a delay time to apply the hidden class because the trigger is a button outside of the panel's div. (if I used a rollover on the button, once you rollout the panel will disappear)
我必须设置延迟时间来应用隐藏类，因为触发器是面板 div 之外的按钮。（如果我在按钮上使用了翻转，一旦你推出面板就会消失）
The code is this
代码是这样的
$(document).ready(function() {
$('#menu-item-9').click(function(){
$('#repair-drop').removeClass('hidden');
$('#repair-drop').addClass('visible');
});
$('#repair-drop').on('mouseleave', function(e) {
setTimeout(function() {
$('#repair-drop').removeClass('visible').addClass('hidden');
}, 600);
});
});
My CSS is as follows
我的CSS如下
.hidden{
max-height: 0px;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.visible{
max-height: 500px;
}
The transition effect is not working at all.
过渡效果根本不起作用。
采纳答案by Fresheyeball
You are adding and removing the class that contains the transition CSS. I recommend moving that to its own rule DEMO.
您正在添加和删除包含过渡 CSS 的类。我建议将其移至其自己的规则DEMO。
.hidden{
max-height: 0px;
}
.visible{
max-height: 500px;
}
#repair-drop{
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
回答by user956584
I am tired of this issue, better use animation:
我厌倦了这个问题，最好使用动画：
.container .element.animation {
animation: SHW .5s;
animation-fill-mode: both
}
@keyframes SHW {
from {
transform:scale(0.7);
opacity:0
}
to {
transform: scale(1);
opacity:1
}
}
Add only to .element class .animation and its working:
仅添加到 .element 类 .animation 及其工作：
$('.container .element').addClass('animation');
回答by Blazemonger
Don't remove the .hiddenclass; it contains your transitionstyles. Just add and remove the .visibleclass.
不要删除.hidden类；它包含您的transition风格。只需添加和删除.visible类。
$(document).ready(function() {
$('#menu-item-9').on('click', function(e) {
$('#repair-drop').addClass('visible');
});
$('#repair-drop').on('mouseleave', function(e) {
setTimeout(function() {
$('#repair-drop').removeClass('visible');
}, 600);
});
});
http://jsfiddle.net/mblase75/LjhNa/
http://jsfiddle.net/mblase75/LjhNa/
That said, you might need to improve your solution to account for users rapidly mousing out of #repair-dropand clicking on #menu-item-9before it can hide.
也就是说，您可能需要改进您的解决方案，以解决用户在隐藏之前快速移出#repair-drop和点击的情况#menu-item-9。
$(document).ready(function() {
$('#menu-item-9').on('click', function(e) {
$('#repair-drop').data('shown',true).addClass('visible');
});
$('#repair-drop').on('mouseleave', function(e) {
$('#repair-drop').data('shown',false);
setTimeout(function() {
if (!$('#repair-drop').data('shown')) {
$('#repair-drop').removeClass('visible');
}
}, 600);
});
});
回答by jbwebtech
Have you considered using jQuery UI's animation features? such as
您是否考虑过使用 jQuery UI 的动画功能？如
jQuery('#menu-item-9').hide({duration:200,effect:'blind'});
You could also animate the removal of the class, like
您还可以动画删除类，例如
jQuery('#menu-item-9').removeClass('hidden', {duration:200,effect:'blind'});
回答by Jaypee
I found a way to make this work using jquery easing plugin. Thanks to all for your responses
我找到了一种使用 jquery 缓动插件来完成这项工作的方法。感谢大家的回复
$(document).ready(function() {
$('#menu-item-9').click(function(){
$('#repair-drop').removeClass('hide');
$('#repair-drop').animate({"max-height":"500px", "padding-top":"20px", "opacity":"1"},1500, "easeOutCubic");
});
$('#repair-drop').on('mouseleave', function(e) {
setTimeout(function() {
$('#repair-drop').animate({"max-height":"0px", "overflow":"hidden", "padding":"0px","opacity":"0"},2000, "easeOutCubic");
}, 600);
});
});
