Dismissing and Adding items with CSS transforms

Developer
Josh Vogt
Size
2,388 Kb
Views
16,192
  1. Dismissing and Adding items with CSS transforms Previews
  2. Dismissing and Adding items with CSS transforms HTML Codes
  3. Dismissing and Adding items with CSS transforms CSS Codes
  4. Dismissing and Adding items with CSS transforms JS Codes

How do I make an dismissing and adding items with css transforms?

Removing and inserting items in a flexbox grid using animated transforms.. What is a dismissing and adding items with css transforms? How do you make a dismissing and adding items with css transforms? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.

Dismissing and Adding items with CSS transforms Previews
IQ Test

Dismissing and Adding items with CSS transforms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dismissing and Adding items with CSS transforms</title> <link rel='stylesheet prefetch' href='https://www.workopolis.com/assets/account/myworkopolis/styles/standard.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="content-box"> <h3 class="worko-heading">Grid o' Boxes</h3> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div> <div class="item"> <h4>something old</h4> <p>click to dismiss</p> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dismissing and Adding items with CSS transforms - Script Codes CSS Codes

.content-box{	box-sizing:border-box; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap:wrap; flex-wrap:wrap; width:610px; margin:20px; background:lightgrey;
}
h3{	width:100%;	margin-left:10px;
}
p{margin:20px 0;}
.item{ height:210px; border:1px solid #ccc; -ms-flex-preferred-size:30%; flex-basis:30%; -ms-flex-item-align:center; -ms-grid-row-align:center; align-self:center; margin:10px; background:white; -webkit-transition:-webkit-transform .4s cubic-bezier(.64,.8,.87,.94); transition:-webkit-transform .4s cubic-bezier(.64,.8,.87,.94); transition:transform .4s cubic-bezier(.64,.8,.87,.94); transition:transform .4s cubic-bezier(.64,.8,.87,.94), -webkit-transform .4s cubic-bezier(.64,.8,.87,.94); cursor:pointer; padding:10px;
}
.item:hover{ border:1px solid #007ac9;
}
.bye{ -webkit-transform:scaleY(0); transform:scaleY(0);
}
.hi{ -webkit-animation:slide-out .4s cubic-bezier(.64,.8,.87,.94) 1; animation:slide-out .4s cubic-bezier(.64,.8,.87,.94) 1; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;
}
@-webkit-keyframes slide-out{ 0%{-webkit-transform:scaleY(0);transform:scaleY(0);} 40%{-webkit-transform:scaleY(0);transform:scaleY(0);} 100%{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
@keyframes slide-out{ 0%{-webkit-transform:scaleY(0);transform:scaleY(0);} 40%{-webkit-transform:scaleY(0);transform:scaleY(0);} 100%{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
.bye.hi{color:red;}

Dismissing and Adding items with CSS transforms - Script Codes JS Codes

$('.item').on('click', function(e) {	$(this).addClass('bye').delay(650).fadeOut(0, function(){	$(this).remove();	}); setTimeout(function() {	$('.content-box').append(	'<div class="item hi"><h4>something new</h4></div>'	);	}, 650);
});
Dismissing and Adding items with CSS transforms - Script Codes
Dismissing and Adding items with CSS transforms - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded November 18, 2022
Rating 3
Size 2,388 Kb
Views 16,192
Do you need developer help for Dismissing and Adding items with CSS transforms?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Vogt (josh_vogt) Script Codes
Name
Toggle - just a dropdown
Toggle - grouped
CSS modals and sheets animations
Toggle - Slider
SMPTE Test Pattern - Flexbox
Repeating Content Module - Expanding
A Pen by Josh Vogt
Hidden Panel
Workopolis SVG Logo - Animated
Header - search v3
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!