Testing animation

index.pug

div.outer(style="height:160px")
	div.container
		div.cards
			div.cardcontainer
				div.card
					button.close ×
	button.controls +
div.outer
	div.container
		div.cards
	button.controls +

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.ts

let timeout = null //This will be a react component, sharing is bad
$(".controls").click(function(){
	clearTimeout(timeout)
	$(this).parent().addClass("anim").find(".cards").append(`<div class="cardcontainer"><div class="card new"><button class="close">×</button></div></div>`)
	$(this).parent().height($(this).parent().find(".cards").height()+64)
	timeout = setTimeout(() => {
		$(this).parent().removeClass("anim")
		$(this).parent().css("height", "auto")
	}, 500);
})
$(document).on("click",".card .close", function(){
	$(this).closest(".card").height($(this).closest(".card").height()).height(0)
	$(this).closest(".cardcontainer").addClass("remove")
})

style.scss

body {
	margin:2rem;
	div.outer {
		display: grid;
		place-items: stretch;
		position: relative;
		border:0.125rem solid black;
		height:4rem;
		background:#F5F7FA;
		border-radius: 1.5rem;
		margin-bottom:2rem;
		&.anim {
			transition:.5s;
		}
		div.container {
			display:grid;
			place-items: stretch;
			//display:none;
			//background:aliceblue;
			//height:10rem;
			height:100%;
			//box-shadow: inset 0 0 0 1px red;
			border-radius: 1.5rem;
			//margin-bottom: 1rem;
			overflow: hidden;
			.cards {
				display:flex;
				flex-direction: column;
				padding:2rem;
				.cardcontainer {
					&:nth-last-child(n+2) {
						margin-bottom:2rem;
					}
					.card {
						position: relative;
						top:0rem;
						height:6rem;
						border-radius: .5rem;
						background:white;
						box-shadow:0 0 2rem -1rem rgba(0,0,0,0.3);
						border:0.125rem solid rgb(68, 47, 47);
						&.new {
							animation:slidein .5s ease-out;
						}
						@keyframes slidein {
							from {
								top:3rem;
							}
							to {
								top:0rem;
							}
						}
						.close {
							display: grid;
							place-items: center;
							position: absolute;
							top:0;
							right:0;
							width:1.5rem;
							height:1.5rem;
							background:black;
							border-radius: 100%;
							border:none;
							transform:translate(50%,-50%) scale(0);
							color:white;
							font-size: 1.2rem;
							font-weight: bold;
							cursor: pointer;
							transition:.25s;
						}
						&:hover {
							.close {
								transform:translate(50%,-50%) scale(1);
							}
						}
					}
					&.remove {
						margin-bottom:0;
						transition: .25s .25s;
						.card {
							opacity:0;
							height:0;
							transition:.25s ease-in, height .25s ease-in .25s;
						}
					}
				}
			}
		}
		.controls {
			display: grid;
			place-items: center;
			position: absolute;
			bottom:0;
			left:50%;
			width:2.5rem;
			height:2.5rem;
			border-radius: 100%;
			background: black;
			color:white;
			font-size: 1.75rem;
			font-weight: bold;
			border:none;
			transform: translate(-50%,50%);
			user-select: none;
			cursor: pointer;
		}
	}
}