例如,请参阅此JSFiddle:http://jsfiddle.net/6ocawwqd/21/
Stack Overflow坚持要我包含我链接的代码,所以这里是JS和CSS:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').removeClass('hide');
setTimeout(function() {
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
transition: all .5s;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
基本问题: 我有一个小部件,我需要隐藏/显示其高度未知。隐藏时,必须将显示设置为“无”。避免选项卡索引和表单验证问题。因此,我使用max-height属性来利用CSS过渡来为隐藏和显示设置动画,并交换显示来自“无”。阻止'阻止' (或者只是通过从元素中删除display属性来实现默认值。在任何一种情况下都会出现问题)。
在我的测试中,我只在iOS上的OSX Safari,Chrome和Safari以及Android Stock移动浏览器中获得双动画。 (适用于Windows Chrome,FF,IE11,Android Chrome)
我在双重动画发生时精确定位。 第一个动画是正确的,并且当max-height属性通过JavaScript从0更改为内容高度时发生。
当我在动画完成后使用计时器删除max-height属性时,会出现第二个动画。我必须删除最大高度,因为在可见之后,元素可能会添加更多项目,因此必须允许增长。
是否有人遇到此问题或有解决方案?
答案 0 :(得分:2)
我遇到了类似的问题,但发现许多 backface-visibility:hidden 建议尚未解决它。
由于您已经使用JavaScript来设置/取消设置高度属性,因此您可以尝试切换其他动画'动画之前和动画完成之后的元素类。如果您在移除高度之前执行此操作(或将其重新设置为' auto'),则iOS不会尝试重新设置导致闪烁的高度属性的动画。
举例http://jsfiddle.net/m2adrugn/2/:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').addClass('animating').removeClass('hide');
setTimeout(function() {
$('.reveal').removeClass('animating');
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').addClass('animating').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none').removeClass('animating');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.animating {
transition: all .5s;
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
答案 1 :(得分:1)
将max-height更改为height。 为我工作。