No CSS transition for 'height: fit-content'
As Mishel stated another solution is to use max-height. Here is a working example of that solution.
The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.
Hope this helps.
https://www.w3schools.com/css/css3_transitions.asp
document.querySelector('button') .addEventListener( 'click', () => document.querySelectorAll('div') .forEach(div => div.classList.toggle('closed')));div { background-color: lightblue; border: 1px solid black; overflow-y: hidden; max-height: 75px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(1, 1, 1, 1);}div.closed { max-height: 0;}<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1><div class="div1">some text<br />even more text<br />so much text</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1><div class="div2">some text<br />even more text<br />so much text</div>CSS transition not working with max-height: fit-content
yes fit-content and max-content are not animate your content. you have to provide some numeric value to the max-height for animate. it consider the height required to your content so you have to provide the value of max-height greater then your content height.
Thank you.
CSS transition on height auto only working when adding class, not when removing class
It's the height, you are adding transition on max-height but your height changes to 0 instantly when you remove expanded class.
You can set height: auto; on the .information class with transition only on max-height.
.information{
height: auto;
max-height: 0;
width: 100%;
overflow: hidden;
z-index: -1;
background: #434C69;
transition: max-height 700ms ease-in-out;
&.expanded{
max-height: 500px;
border-bottom: 1px solid $secondary-blue;
}
}
How can I transition height: 0; to height: auto; using CSS?
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.
See JSFiddle demo provided by Chris Jordan in another answer here.
#menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5;}
#menu:hover #list { max-height: 500px; transition: max-height 0.25s ease-in;}<div id="menu"> <a>hover me</a> <ul id="list"> <!-- Create a bunch, or not a bunch, of li's to see the timing. --> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul></div>CSS Transition doesn't work on height property
So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.
Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.
But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.
What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
Then I would adjust the CSS of the .icons:
(remove the height, add a max-height and adjust the transition)
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
In the end I would let JavaScript take care of getting the max-height right.
On hover:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
Or on click (if you would rather do that):
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onclick = function() {
if (icons.style.maxHeight){
icons.style.maxHeight = null;
} else {
icons.style.maxHeight = icons.scrollHeight + "px";
}
}
Here are some (maybe) helpfull links:
- https://www.w3schools.com/howto/howto_js_collapsible.asp
- How can I transition height: 0; to height: auto; using CSS?
- https://codepen.io/felipefialho/pen/ICkwe
Snippet:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>CSS width transition not working when originally setting width to fit-content
Your assumption/expectation about width: fit-content seems reasonable to me. Until someone can explain better, you could use width: fit-content along with min-width: 0, then animate min-width. It's not perfect, since the animation begins at 0 (you may notice a slight delay)
* {
font-family: sans-serif;
}
div:not(#container) {
width: fit-content;
min-width: 0;
background-color: green;
color: white;
margin-top: 1em;
padding: 1em;
transition-property: min-width;
transition-duration: 1s;
}
#ease {
transition-timing-function: ease;
}
#linear {
transition-timing-function: linear;
}
#ease-in {
transition-timing-function: ease-in;
}
#ease-out {
transition-timing-function: ease-out;
}
#in-out {
transition-timing-function: ease-in-out;
}
#container:hover div {
min-width: 90%;
}<html>
<head>
<title>CSS animations</title>
</head>
<body>
<div id="container">
<div id="linear">
<p>
Linear
</p>
</div>
<div id="ease">
<p>
Ease
</p>
</div>
<div id="ease-in">
<p>
In
</p>
</div>
<div id="ease-out">
<p>
Out
</p>
</div>
<div id="in-out">
<p>
In-out
</p>
</div>
</div>
</body>
</html>CSS transition auto height not working
One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...
Here's a DEMO
You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.
Hope this helps!
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left;}.ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{ background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);}
.ac-container input{ display: none;}.ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{ -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/}<div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p> </section> <label for="ac-1">About us</label> </div>
<div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label></div></div>How can I transition width of content with width: auto?
As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
Stack snippet
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom;}.myspan::after { content: " \00a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: max-width .6s; vertical-align: bottom; overflow: hidden;}.myspan:hover::after { max-width: 80px; transition: max-width 1s;}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>Related Topics
How to Change The Color of The Text Cursor in an Input Field in Ie
Hide List with One Element with Pure CSS
Is There a Cross-Browser Way to Condense Text on a Page
CSS3 Ch Unit Inconsistent Between Ie9+ and Other Browsers
CSS Divs Jumping When Border Added
How to Do an Inset Border with a Border Radius on an Image
Vertically Aligning Block Element to Image
CSS Column-Count Not Respected
Style Dojox Grid Row Depending on Data
How to Adjust Bootstrap's Container Div to 100Px Off The Left Viewport Edge