0
我正在尝试动画新内容行的入口。我正在使用keyframes动画，因此我可以稍后添加缓动。为什么我的动画容器的内容不起作用？为什么我的动画容器的孩子不能动画？
我希望进入页面的行中每个框的内容展开或隐藏，直到有足够的高度显示它为止。
我试图创建一个stackoverflow片段，但这里是一个codepen似乎更好地工作。 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>
究竟是什么动画不像你期望的那样？ –
很抱歉，如果它不明显。图像，文本和按钮不应该越过边界，因为新行正在扩展。 – AlexMA