我正在使用Lottie Web - js plugin为SVG路径设置动画。除了在Safari中SVG上下闪烁的Safari之外,其他所有功能都可以正常运行,如以下屏幕截图所示:
我注意到,当我将鼠标移到SVG附近或在Safari桌面上调整浏览器窗口的大小时,而在移动环境中,当我更改页面并返回索引时,就会发生此问题。
我在body标签上应用了mousemove事件。我正在使用pjax来更改页面(swup.js)。在页面中输入内容时,我正在使用CSS中的translate3d来对组件进行动画处理。 chrome / safari控制台中未显示任何错误。我已经尝试删除svg上的其他脚本或转换,但是问题仍然存在。
我不明白可能是什么问题。请在Safari上访问andreabalbo.com进行测试。原始文件在这里lottie file。
下面是一些代码:
function init_home() {
//lottie home me at office
if( $("#home-isometric").length != 0 ){
let home_isometric_animation = lottie.loadAnimation({
container: document.getElementById("home-isometric"),
renderer: 'svg',
loop: true,
autoplay: false,
path: '../assets/lottie-files/home-isometric.json'
});
home_isometric_animation.addEventListener('DOMLoaded', function(){
home_isometric_animation.playSegments([[1,180],[180,1]], true);
});
}
}
init_home();
div#home-isometric{
& > svg{
margin-top:50px;
max-height: 300px;
transform: scale(1.5) !important;
}
@media (min-width: 992px) {
&::after{
content:'Business Support Analyst, Cofondatore di Pellet del Sureste e professionista nel settore Informatica e servizi.';
position: absolute;
top: 50%;
left: -300px;
width: 500px;
font-family: 'Courgette', cursive;
text-align: justify;
font-size: 1.6em;
color: #393858;
}
}
}
<div id="home-isometric" class="col" data-velocity-slideleftin="600"></div>
这里还有一个问题可能是有用的,但对我来说不是幸运的-> SVG path animation flicker on Safari
非常感谢, 安德里亚