Why are my animated container's children not animating as well? - css

Question

I am trying to animate the entrance of new rows of content. I am using keyframes animations so I can later add easing. Why are my animated container's contents not animating?
I would expect the contents of each box in the row that is entering the page to expand or be hidden until enough height is available to show it.
I tried to create a stackoverflow snippet, but here is a codepen that seems to work better. https://codepen.io/AlgeoMA/pen/XgKWMq
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>

Answer 1

The image, text and button should not escape the border as the new row is expanding
Add overflow: hidden to .block
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>