Я создаю веб-сайт и столкнулся с проблемой определения переменных в Safari. Код отлично работает в Chrome.
То, что я пытаюсь сделать, это получить высоту элемента во время его усечения (используя -webkit-line-clamp), чтобы позже я мог оживить высоту до ее полного значения. Сейчас я делаю -webkit-line-clamp равным unset (начальное значение 1), получая высоту элемента, возвращая -webkit-line-clamp в 1, а затем анимируя max-height. Соответствующий код выглядит следующим образом с комментариями к важным строкам.
$(".cd-timeline__block.js-cd-block").hover(function(){
$(this).children(":last").children("h2").css("opacity", "1");
var ele = $(this).children(":last").children(".content-wrapper-desc").children(":first");
ele.css({"max-height": "max-content", "visibility": "hidden", "transition": "250ms", "-webkit-line-clamp": "unset", "opacity": "1"});
var temp_height = ele.height();
debugger; //in the debugger, ele.height() returns the correct value of the element's full height
console.log(temp_height); //the console.log outputs the height of the truncated element
ele.css({
'position': 'relative',
'visibility': 'inherit',
'max-height': '2rem',
'display': '-webkit-box',
'transition': '250ms !important',
'-webkit-line-clamp': 'unset',
});
setTimeout(function(){
console.log(temp_height);
ele.css("max-height", temp_height+"px"); //setTimeout with 1ms is to ensure that the animation runs. not entirely sure why this is necessary, but trial and error proved that it does.
}, 1);
}, function(){
$(this).children(":last").children("h2").css("opacity", "0.3");
ele = $(this).children(":last").children(".content-wrapper-desc").children(":first");
ele.css({"max-height": "2rem", "-webkit-line-clamp": "unset", "opacity": "0.4"});
setTimeout(function(){
ele.css({"-webkit-line-clamp": "1"});
}, 250);
});
Вот что я вижу в отладчике
Код здесь:
И когда я иду к консоли и пытаюсь изолировать проблему, вот что я получаю:
