元素尺寸的CSS3转换不能从百分比或自动转换到像素大小
我正在建立一个单页面的网站，显示一个矢量图形的80%的屏幕宽度在‘开始屏幕’。一旦用户向下滚动，图形将转换到页面顶部的导航栏，并将显示50px的高度。从大尺寸到小尺寸的过渡应使用CSS3过渡设置动画。
然而，当元素从百分比或自动值缩放到固定的像素值时，CSS转换似乎不起作用，反之亦然。我已经制作了一个jsfiddle来演示这种效果。虽然div的高度可以很好地过渡，但宽度根本不是动画。
出于响应式设计的原因，使用像素宽度作为图像的初始大小是不可取的。代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body{
background-color: #010101;
height: 100%;
}
.navbar--logo-item{
background-color: #fff;
height: 10px;
width: 80%
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navbar--logo-item.small{
height: 50px;
width: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#toggle').click(function(){
$('.navbar--logo-item').toggleClass('small');
});
});
</script>
</head>
<body>
<div class="navbar--logo-item"></div>
<button id="toggle">
Toggle Logo
</button>
</body>
</html>回答 2
Stack Overflow用户
发布于 2015-05-20 18:23:57
在现代浏览器中，这可以使用calc来解决。
只要计算值是同构的，就可以转换该计算值。你的案例可以用一种类似的方式表达如下
.navbar--logo-item{
width: calc(80% + 0px);
}
.navbar--logo-item.small{
width: calc(0% + 200px);
}请注意，这两个计算值是相似的(它们将一个百分比和一个像素值相加)，但同时结果与您已有的结果相同
另一种常见的方法是在较高的可能原始值上设置max-width，如下所示
.navbar--logo-item{
width: auto;
max-width: 1000px; /* you don't need to set an accurate value */
}
.navbar--logo-item.small{
max-width: 200px; /* no need to set width */
}Stack Overflow用户
发布于 2015-05-20 16:42:03
如果你设置你的徽标的宽度为它的直接父级的宽度，那么所有的东西都是以像素为单位的，并且转换会按照你想要的方式发生。
$(document).ready(function(){
var logo = $('.navbar--logo-item');
function setWidthtoParent(target) {
var parentWidth = target.parent().width();
target.css('width', parentWidth);
}
setWidthtoParent(logo);
$('#toggle').click(function(){
logo.toggleClass('small');
});
});html, body{
background-color: #010101;
height: 100%;
}
.navbar--logo-item{
background-color: #fff;
height: 10px;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navbar--logo-item.small{
height: 50px;
width: 200px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="navbar--logo-item"></div>
<button id="toggle">
Toggle Logo
</button>
</body>
这并不理想，因为它需要添加一个!important声明来覆盖应用的内联样式。您还会冒着在转换发生之前调整浏览器窗口大小的风险。一个更好的解决方案是使用一致的单元(也许可以转换父div的宽度，而SVG保持在100%，如this)。
https://stackoverflow.com/questions/30343978
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号