CODING:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF- 8">
<meta name="viewport" content="width=device- width, initial- scale=1.0">
<title>Stack Animation</title>
<style>
body {
font- family: times new roman, sans- serif;
display: flex;
justify- content: center;
align- items: center;
height: 100vh;
background- color: red;
margin: 0;
}
# stack- container {
position: relative;
width: 150px;
height: 400px;
border: 2px solid # 333;
background- color: blue;
display: flex;
flex- direction: column- reverse;
justify- content: flex- end;
overflow: hidden;
}
.stack- item {
width: 100% ;
height: 400px;
background- color: black;
color: white;
display: flex;
justify- content: center;
align- items: center;
border: 1px solid # 333;
margin- bottom: 5px;
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s, transform 0.5s;
}
.stack- [Link] {
opacity: 1;
transform: translateY(0);
}
# actions {
margin- top: 20px;
}
button {
padding: 10px 20px;
font- size: 16px;
margin: 5px;
cursor: pointer;
}
button:disabled (
background- color: # ddd;
}
</style>
</head>
<body>
<div>
<div id="stack- container"></div>
<div id="actions">
<button id="push- btn">Push</button>
<button id="pop- btn" disabled>Pop</button>
</div>
</div>
<script>
const stackContainer = [Link]('stack- container');
const pushButton = [Link]('push- btn');
const popButton = [Link]('pop- btn');
let stack = [ ] ;
let count = 0;
// Function to push an item onto the stack
function pushStack() {
const stackItem = [Link]('div');
[Link]('stack- item');
[Link] = 'Item ' + (count + 1);
[Link](stackItem);
[Link](stackItem);
// Animation for the push
setTimeout(() => {
[Link]('show');
}, 10);
count++;
[Link] = false;
}
// Function to pop an item from the stack
function popStack() {
if ([Link] === 0) return;
const itemToPop = [Link](); // Animation for the pop
[Link] = 'translateY(- 100px)';
[Link] = '0'; // Remove the item after animation
setTimeout(() => {
[Link](itemToPop);
}, 500);
count- - ;
if ([Link] === 0) {
[Link] = true;
}
}
[Link]('click', pushStack);
[Link]('click', popStack);
</script>
</body>
</html>
OUTPUT :
PUSH :-
POP :-