Javascript 用于在Safari中放大图像的断断续续CSS动画
我正在尝试创建一个动画,它将页面上任何位置的图像移动到中间,同时将其调整为浏览器窗口的全宽。我的解决方案可行,但有一些结巴/跳跃,我无法真正解释。有没有人已经尝试过创建类似的动画编辑:我注意到口吃问题似乎只出现在macOS Safari中。在其他浏览器中,此动画运行起来非常流畅。 以下是我的js代码:Javascript 用于在Safari中放大图像的断断续续CSS动画,javascript,html,css,css-animations,web-animations,Javascript,Html,Css,Css Animations,Web Animations,我正在尝试创建一个动画,它将页面上任何位置的图像移动到中间,同时将其调整为浏览器窗口的全宽。我的解决方案可行,但有一些结巴/跳跃,我无法真正解释。有没有人已经尝试过创建类似的动画编辑:我注意到口吃问题似乎只出现在macOS Safari中。在其他浏览器中,此动画运行起来非常流畅。 以下是我的js代码: function getWindowWidth() { return document.documentElement.clientWidth } function getWindowHe
function getWindowWidth() {
return document.documentElement.clientWidth
}
function getWindowHeight() {
return document.documentElement.clientHeight;
}
//at the moment this is hacky and only supports one image to be enlarged
let en_img_left = null;
let en_img_top = null;
function enlargeImage(img) {
let boundingClientRect = img.getBoundingClientRect();
img.style.position = "fixed";
en_img_top = boundingClientRect.y + "px";
img.style.top = en_img_top;
en_img_left = boundingClientRect.x + "px";
img.style.left = en_img_left;
img.style.width = boundingClientRect.width + "px";
img.style.zIndex = "1000";
setTimeout(function() {
img.style.transition = "1s ease-in-out";
setTimeout(function() {
let scaleFactor = getWindowWidth() / boundingClientRect.width;
img.style.transform = "scale(" + scaleFactor + ")";
img.style.left = getWindowWidth() / 2 - (boundingClientRect.width / 2) + "px";
img.style.top = getWindowHeight() / 2 - boundingClientRect.height / 2 + "px";
}, 1);
}, 1);
return img;
}
function delargeImage(img) { //sorry for the function name
img.style.transition = "1s ease-in-out";
setTimeout(function() {
img.style.transform = "scale(1)";
img.style.left = en_img_left;
img.style.top = en_img_top;
}, 1);
return img;
}
示例HTML+CSS代码,但它可以是网站上具有ID的任何图像:
HTML:
我还制作了一个JSFIDLE,很好地显示了口吃问题:
您没有使用CSS动画或过渡 在您的示例中,动画本身是通过JavaScript执行的。与在JS中计算动画的每一步并在每次迭代中设置新的CSS属性不同,您应该使用所需的开始和结束状态设置CSS动画,或者定义应该转换的属性。这样,动画在过渡时应该看起来平滑 您的示例使用CSS转换(没有任何JS代码):
.container{
宽度:200px;
过渡:宽度在1s内减小;
}
.容器:悬停{
宽度:80vw;
}
.集装箱img{
宽度:100%;
}
在您的示例中没有看到任何结巴?您可以指定何时出现结巴,您是否尝试过使用本地资源而不是外部链接的图像?@whiterabbitj噢,我现在在其他浏览器中进行了测试,结巴似乎只出现在macOS上的Apple Safari中。使用本地图像或外部资源也没什么区别。更新的问题。嗯,这很奇怪。尝试清除缓存,也许重新启动计算机,看看是否有帮助。不知道Safari如何以不同的方式解释java脚本。也许将动画更改为更基本的动画,看看是否仍然会出现口吃是个好主意?谢谢你的回答!但我使用的是CSS动画,我只是在js中设置结束和停止状态。(没有使用setInterval,只有2个SetTimeout来处理应用于初始绝对位置分离的动画。)我可能尝试创建一个仅使用css的示例,但它不会改变结果。此外,我还发现口吃只发生在Safari中,在其他浏览器中,我的动画运行平稳,这将进一步说明这一点。
<div class="container">
<img id="example" style="width: 100%" src="https://images.pexels.com/photos/1361815/pexels-photo-1361815.jpeg?cs=srgb&dl=blur-bokeh-close-up-1361815.jpg&fm=jpg">
</div>
.container {
width: 200px;
}