元素尺寸的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過渡不能從百分比或自動到像素尺寸

回答

相關問題