元素尺寸的 CSS3 过渡不能从百分比或自动到像素大小答案

【问题标题】：CSS3 transition for element dimensions not working from percentage or auto to pixel size元素尺寸的 CSS3 过渡不能从百分比或自动到像素大小
【发布时间】：2015-08-01 08:44:56
【问题描述】：

我正在构建一个单页网站，它在“开始屏幕”上显示 80% 屏幕宽度的矢量图形。用户向下滚动后，图形将转换到页面顶部的导航栏，并应获得 50 像素的高度。从大尺寸到小尺寸的过渡应使用 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>

【问题讨论】：

标签： css css-transitions

【解决方案1】：

在现代浏览器中，这可以使用 calc 来解决。

只要计算值是同质的，您就可以转换它。你的情况可以用同质的方式表达如下

.navbar--logo-item{
    width: calc(80% + 0px);
}
.navbar--logo-item.small{
    width: calc(0% + 200px);
}

请注意，这 2 次计算是相似的（它们将百分比和像素值相加），但同时结果与您已有的相同

fiddle

另一种通常的方法是在更高的原始值上设置一个最大宽度，例如

.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 */
}

【讨论】：

虽然这似乎是一个好方法，但我刚刚意识到，我的问题有点复杂。我使用 auto 作为维度值。 width: calc(auto +0px) 似乎对我来说不起作用。我要更新我的问题...
添加了另一种处理方式。不完美，但如果初始宽度在有限的范围内，则可以工作

【解决方案2】：

如果您将徽标的宽度设置为其直接父级的宽度，那么一切都以像素为单位，并且转换将按照您的意愿进行。

$(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 声明来覆盖应用的内联样式。您还冒着在转换发生之前调整浏览器窗口大小的风险。更好的解决方案是使用一致的单位（也许在 SVG 保持 100% 的同时转换父 div 的宽度，例如 this）。

【讨论】：