我正在建立一个网站,但在Safari中遇到了变量定义问题。该代码可以在Chrome中正常运行。
我想做的是在截断某个元素时获取其高度(使用-webkit-line-clamp
),以便稍后可以将其高度动画化为完整的值。我现在正在做的是将-webkit-line-clamp
设置为未设置(初始值为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);
});
代码在这里:
当我进入控制台并尝试找出问题时,这就是我得到的: