As part of my project, I am developing a single-page website that features a vector graphic occupying 80% of the screen width on the initial 'start screen'. Once the user scrolls down, the graphic smoothly transitions into a navigation bar positioned at the top of the page with a height of 50px. To achieve this effect, I planned to use CSS3 transitions for animating the resizing process.
However, I encountered an issue where CSS transitions do not seem to work correctly when scaling an element from a percentage or auto value to a fixed pixel value and vice versa. I created a jsfiddle to showcase this problem. While the height transition of the div works as expected, the width does not animate properly.
Due to the necessity of maintaining responsive design principles, using pixel widths for the initial image size is not viable. Here is a snippet of the problematic code:
<!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>