我正在构建一个单页网站，它在“开始屏幕”上显示 80% 屏幕宽度的矢量图形。一旦用户向下滚动，图形就会过渡到页面顶部的导航栏，并应获得 50 像素的高度。从大尺寸到小尺寸的过渡应该使用 CSS3 过渡动画。
但是，当将元素从百分比或自动值缩放到固定像素值时，CSS transitions 似乎不起作用，反之亦然。我做了一个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>
最佳答案
在现代浏览器中，可以使用 calc 解决。
您可以转换计算值，只要它是同质的。 你的情况可以用同质化的方式表达如下
.navbar--logo-item{
width: calc(80% + 0px);
}
.navbar--logo-item.small{
width: calc(0% + 200px);
}
请注意，这 2 个计算是相似的(它们对百分比和像素值求和)，但同时结果与您已有的结果相同
另一种常用的方法是在较高的可能原始值上设置最大宽度，例如
.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 */
}
关于元素尺寸的 CSS3 过渡从百分比或自动到像素大小不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30343978/