所以
我正在尝试使用jquery transit
构建一些导航打开/向下滑动导航工作正常。它将子ul设置为显示块,然后运行动画/转换。
关闭导航项时出现问题。虽然写在回调中,但是会立即隐藏ul。转换完成后,我还添加了一个“动画结束”的控制台日志,这是在正确的时间触发,因此不确定为什么会立即隐藏ul。
jquery / js看起来像这样:
var dropDown = (function(){
var mainNav = $('#mainNav');
var navA = mainNav.find('li a');
var navUL = mainNav.find('ul');
var iconAll = mainNav.find('i');
navUL.transition({
'max-height': '0px',
'height': '0px',
'overflow': 'hidden',
'display': 'none'
});
navA.on('click',function(){
var nextUL = $(this).next();
var icon = $(this).find('i');
var nextULHidden = nextUL.css('display') === 'none';
if(nextULHidden) {
nextUL.css('display','block').transition({
duration: 1000,
'height': 'auto',
'max-height': '1000px',
easing: 'ease-in'
});
$(this).addClass('active');
icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
console.log('hidden');
}else if(!nextULHidden){
nextUL.transition({
duration: 1000,
'height': '0px',
'max-height': '0px',
easing: 'ease-in',
complete: function(){
nextUL.css('display','none');
console.log('animation ended');
}
});
$(this).removeClass('active');
icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
console.log('visible');
}else{
console.log('some error');
}
return false;
});
}());
我在这里有一个小提琴,可以修改:http://jsfiddle.net/lharby/o5w8ebu8/2/
我尝试过使用css visibility,jquery show()和hide()函数的各种组合,但每次ul开始转换时(有效点击)都会消失。我已经测试过Chrome,Firefox和Safari,以防万一有任何异常现象。
答案 0 :(得分:1)
我相信回调是在正确的时间(1000毫秒后)触发,问题是过渡动画无效。
在缩小过渡期间更改为'height': 'auto'
似乎可以达到您所追求的效果。虽然我不能说我真的知道为什么。