CSS3转换与jQuery .addClass和.removeClass [英] CSS3 transition with jQuery .addClass and .removeClass

问题描述

我使用jQuery来触发它的可见性。添加/删除类可见/隐藏。

我必须设置一个延迟时间来应用隐藏类，因为触发器是面板的div之外的按钮。 （如果我在按钮上使用滚动，一旦滚动，面板将消失）

代码是

  $（document）.ready（function（）{
 $（'＃menu-item-9'）。 '＃repair-drop'）。removeClass（'hidden'）; 
 $（'＃repair-drop'）。addClass（'visible'）; 
} ＃repair-drop'）。on（'mouseleave'，function（e）{
 setTimeout（function（）{
 $（'＃repair-drop'）。removeClass（'visible'）。addClass （'hidden'）; 
}，600）; 
 
}）; 
}）; 
  

我的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; 
} 
  

过渡效果根本不起作用。

解决方案

您正在添加和删除包含转换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; 
} 
  

I have a big main navigation pannel 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.

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)

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

.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.

解决方案

You are adding and removing the class that contains the transition CSS. I recommend moving that to its own rule 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;
}

这篇关于CSS3转换与jQuery .addClass和.removeClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！