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

我正在构建一个单页网站，该网页在'开始屏幕'上显示80％屏幕宽度的矢量图形。一旦用户向下滚动，图形将跳转到页面顶部的导航栏，并且会收到50px的高度。从大尺寸到小尺寸的转换应该使用CSS3转换动画。元素尺寸的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>

来源

2015-05-20 Bunjip

如果您的标志的设置宽度为它的直接父的那么一切都是以像素为单位，当你想要的过渡会发生。

$(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> 
 
\t <div class="navbar--logo-item"></div> 
 
\t <button id="toggle"> 
 
\t \t Toggle Logo 
 
\t </button> 
 
</body>

这并不理想，因为它需要添加!important声明过度骑所施加的内联样式。在转换发生之前，您还有可能调整浏览器窗口的大小。更好的解决方案是使用一致的单元（可能在SVG保持100％时转换父div的宽度，例如this）。

来源

2015-05-20 08:42:02 CherryFlavourPez

在现代浏览器中，可以使用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 */ 
}

来源

2015-05-20 10:23:57 vals

虽然这似乎是一种好方法，但我刚刚意识到，我的问题有点复杂。我使用auto作为维度值。宽度：计算（自动+ 0px）似乎不工作，我的遗憾。我要更新我的问题... – Bunjip

增加了另一种处理方法。不完美，但可以工作，如果初始宽度在一个有限的范围内 – vals

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

回答

相关问题