尝试缓解JavaScript上的单击事件
尝试缓解JavaScript上的单击事件
提问于 2018-10-24 08:05:38
我有一个网页，在这里我将SVG放大到一个特定的区域(较亮的矩形)。我这样做的方法是更改viewBox属性，因为svg中有一个更大的元素(现在它只是一个红色矩形)，并且我不喜欢使用库。
所以，一切正常，但是缩放功能发生得太快了，我想知道如何放慢它，因为它是CSS中的一个过渡。如果我必须将js脚本与CSS联系起来，或者如果我的转换尝试在错误的地方，我现在就不知道了。
var selected = false;
var svg = document.getElementById('svg');
var rect =document.getElementById('rect');
var zoomOnElement = function(e) {
if (e.target === selected)
{
// Deselect element
//svg.setAttribute("viewBox","264.5 126.2 1149.9 547.4");
selected = false;
}
else
{
// Select element
selected = e.target;
var viewBox = selected.getAttribute('x')
viewBox += " " + selected.getAttribute('y')
viewBox += " " + (selected.getAttribute('width'))
viewBox += " " + (selected.getAttribute('height'))
svg.setAttribute("viewBox", viewBox);}
}
document.getElementById('window').addEventListener("click", zoomOnElement); html {margin: 0px; padding: 0px;}
body {margin: 0px; padding: 0px;}
svg {
height:100vh;
width: 100vw;
margin: 0px;
padding: 0px;
position: absolute;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div {
margin: 0px;
padding: 0px;
float: left;
position: absolute;
}
rect.mouse:hover {
cursor: pointer;
}
.box{
width: 98.7;
height: 70;
} <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="264.5 126.2 1149.9 547.4" xml:space="preserve">
<rect x="263.3" y="126.7" opacity="0.39" fill="#370B13" width="1149.8" height="547.6"/>
<rect id="rect" x="739.8" y="298.6" opacity="0.4" fill="#F7F7F7" width="62.9" height="70"/>
<rect class="mouse" id="window" x="729.8" y="292.3" opacity="0.8" fill="#F7F7F7" width="157.2" height="83"/>
<polyline fill="none" stroke="#000000" stroke-width="2" points="750.9,298.6 738.7,298.6 738.7,368.6 750.9,368.6 "/>
<polyline fill="none" stroke="#000000" stroke-width="2" points="794.8,368.6 802.8,368.6 802.8,298.6 794.8,298.6 "/>
</svg>
<div id="left" class="half"></div>
回答 1
Stack Overflow用户
发布于 2018-10-24 08:22:36
您的CSS transition不起作用，因为当您单击您的SVG时，您没有更改任何CSS属性。转换仅适用于CSS属性发生更改时。您真正需要做的就是更改CSS scale以创建缩放效果。
/* This style will be applied when the SVG is clicked */
.zoomed { transform:scale(2.0); }<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html {margin: 0px; padding: 0px;}
body {margin: 0px; padding: 0px;}
svg {
height:100vh;
width: 100vw;
margin: 0px;
padding: 0px;
position: absolute;
transform:scale(1.0); /* Set the initial zoom */
transition: transform 1s ease-in-out;
}
div {
margin: 0px;
padding: 0px;
float: left;
position: absolute;
}
rect.mouse:hover {
cursor: pointer;
}
.box{
width: 98.7;
height: 70;
}
</style>
</head>
<body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="264.5 126.2 1149.9 547.4" xml:space="preserve">
<rect x="263.3" y="126.7" opacity="0.39" fill="#370B13" width="1149.8" height="547.6"/>
<rect id="rect" x="739.8" y="298.6" opacity="0.4" fill="#F7F7F7" width="62.9" height="70"/>
<rect class="mouse" id="window" x="729.8" y="292.3" opacity="0.8" fill="#F7F7F7" width="157.2" height="83"/>
<polyline fill="none" stroke="#000000" stroke-width="2" points="750.9,298.6 738.7,298.6 738.7,368.6 750.9,368.6 "/>
<polyline fill="none" stroke="#000000" stroke-width="2" points="794.8,368.6 802.8,368.6 802.8,298.6 794.8,298.6 "/>
</svg>
<div id="left" class="half"></div>
<script type="text/javascript">
var svg = document.getElementById('svg');
svg.addEventListener("click", function(){
// Dynamically add the .zoomed CSS class, triggering the transition
this.classList.add("zoomed");
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52959364
复制相关文章
相似问题