view-transitions实现卡片添加删除动画过渡效果代码-html代码-BFW代码库

代码语言：html

代码描述： view-transitions实现卡片添加删除动画过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@layer view-transitions {

	/* Don’t capture the root, allowing pointer interaction while cards are animating */
	@layer no-root {
		:root {
			view-transition-name: none;
		}
		::view-transition {
			pointer-events: none;
		}
	}
	
	/* Cards, in general, should use a bounce effect when moving to their new position */
	@layer reorder-cards {
		@supports (view-transition-class: card) {
			.warning {
				display: none;
			}
			
			:root {
				--bounce-easing: linear(
					0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
					1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
					0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
					0.973, 1, 0.988, 0.984, 0.988, 1
				);
			}

			.card {
				view-transition-class: card;
			}
			
			/* Without view-transition-class you had to write a selector that targets all cards … and that selector needed updating whenever you added/removed a card */
			::view-transition-group(*.card) {
				animation-timing-function: var(--bounce-easing);
				animation-duration: 0.5s;
			}
		}
	}

	/* Newly added cards should animate-in */
	@layer add-card {
		@keyframes animate-in {
			0% {
				opacity: 0;
				translate: 0 -200px;
			}
			100% {
				opacity: 1;
				translate: 0 0;
			}
		}

		::view-transition-new(targeted-card):only-child {
			animation: animate-in ease-in 0.25s;
		}
	}

	/* Cards that get removed should animate-out */
	@layer remove-card {
		@keyframes animate-out {
			0% {
				opacity: 1;
				translate: 0 0;
			}
			100% {
				opacity: 0;
				translate: 0 -200px;
			}
		}

		::view-transition-old(targeted-card):only-child {
			animation: animate-out ease-out 0.5s;
		}
	}

}

/* Etc. */
@layer base {
	body {
		display: grid;
		height: 90dvh;
		place-items: center;
		padding: 2rem 0;
		font-family: system-ui, sans-serif;
	}

	.cards {
		padding: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		gap: 2rem;
		padding: 1rem;
		flex-wrap: wrap;
	}

	.card {
		width: 100%;
		aspect-ratio: 2/3;
		display: block;
		position: relative;
		border-radius: 1rem;
		max-width: 220px;
		min-width: 100px;

		background-color: grey;
	}

	.delete-btn {
		--icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTExMiwxMTJsMjAsMzIwYy45NSwxOC40OSwxNC40LDMyLDMyLDMySDM0OGMxNy42NywwLDMwLjg3LTEzLjUxLDMyLTMybDIwLTMyMCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjMycHgiIHgxPSI4MCIgeDI9IjQzMiIgeTE9IjExMiIgeTI9IjExMiIvPjxwYXRoIGQ9Ik0xOTIsMTEyVjcyaDBhMjMuOTMsMjMuOTMsMCwwLDEsMjQtMjRoODBhMjMuOTMsMjMuOTMsMCwwLDEsMjQsMjRoMHY0MCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiLz48bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MzJweCIgeDE9IjI1NiIgeDI9IjI1NiIgeTE9IjE3NiIgeTI9IjQwMCIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDozMnB4IiB4MT0iMTg0IiB4Mj0iMTkyIiB5MT0iMTc2IiB5Mj0iNDAwIi8+PGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiIHgxPSIzMjgiIHgyPSIzMjAiIHkxPSIxNzYiIHkyPSI0MDAiLz48L3N2Zz4=);
		position: absolute;
		bottom: -0.75rem;
		right: -0.75rem;
		width: 3rem;
		height: 3rem;
		padding: 0.5rem;
		border: 4px solid;
		border-radius: 100%;
		background: aliceblue var(--icon) no-repeat 50% 50% / 70%;
		color: white;
		cursor: pointer;

		&:hover {
			background-color: orangered;
		}
	}

	.add-btn {
		--icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiIHgxPSIyNTYiIHgyPSIyNTYiIHkxPSIxMTIiIHkyPSI0M.........完整代码请登录后点击上方下载按钮下载查看