Trying to implement transitions with flex grow has been a challenge. It works smoothly without any issues, but as soon as I add the bootstrap 4 style sheet, the transitions stop working. I haven't even started using the bootstrap 4 classes yet, it's just included in the project.
In the code below, removing the "collapsed" class from the row should animate the rows based on flex-grow.
However, when you enable the bootstrap style line in the snippet, it all breaks. Can anyone shed some light on why this is happening?
Take a look at the JSFiddle link to see the issue in action...
$(function() {
setTimeout(function() {
$(".test-row-collapse").removeClass("collapse");
setTimeout(function() {
$(".test-row-collapse").addClass("collapse");
}, 2000);
}, 2000);
});html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
font-size: 10px;
}
.animate-grow-container {
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.animate-grow-row {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
text-align: center;
}
.animate-grow-row-overflow {
max-height: 100vh;
transition: all 2s;
overflow: hidden;
}
.collapse .animate-grow-row-overflow {
max-height: 0;
}
.collapse {
flex-grow: 0.0001;
}<!-- Enable line below and it stops working :( -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-grow-container">
<div class="animate-grow-row" style="background: red">
<p>This is some content</p>
</div>
<div class="animate-grow-row" style="background: blue">
<p>This is some content</p>
</div>
<div class="animate-grow-row" style="background: green" onclick="$(this).next().removeClass('collapse')">
<p>This is some content</p>
</div>
<div class="animate-grow-row test-row-collapse collapse" style="background: yellow" onclick="$(this).addClass('collapse')">
<div class="animate-grow-row-overflow">
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
<p>This is some content</p>
</div>
</div>
</div>