div+js通过startViewTransition模拟页面跳转过渡堆叠动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+js通过startViewTransition模拟页面跳转过渡堆叠动画效果代码，实现页面之间的跳转动画。

代码标签： div js startViewTransition 模拟页面跳转过渡堆叠动画

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@keyframes shrink {
	to {
		scale: 0.8;
		opacity: 0.5;
	}
}
@keyframes grow {
	from {
		scale: 0.8;
		opacity: 0.5;
	}
}
@keyframes slide-in {
	from {
		translate: 100vw 0;
	}
}
@keyframes slide-out {
	to {
		translate: 100vw 0;
	}
}

::view-transition {
	background: black;
}

:root {
	view-transition-name: none;
}
body {
	view-transition-name: page;
}

::view-transition-group(page) {
	animation-duration: 0.7s;
}

:root[data-transition="push"] {
	&::view-transition-old(page) {
		&::view-transition-old(page) {
			animation-name: shrink;
			transform-origin: 100% 50%;
		}
	}
	&::view-transition-new(page) {
		animation-name: slide-in;
	}
}

:root[data-transition="pop"] {
	&::view-transition-old(page) {
		animation-name: slide-out;
		z-index: 1;
	}
	&::view-transition-new(page) {
		animation-name: grow;
		transform-origin: 100% 50%;
	}
}

@layer reset {
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	ul[class] {
		list-style: none;
	}

	img {
		display: inline-block;
	}

	h1 {
		margin-bottom: 0.5em;
	}
}

@layer layout {
	@layer general {
		html {
			background: white;
		}

		html,
		body {
			height: 100%;
		}

		body {
			background: white;
			font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
				"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}
	}
	
	@layer views {
		.view {
			position: fixed;
			inset: 0;
			overflow-y: auto;
		}
		
		.view h1 {
			padding: 2rem 1rem 0.2rem 1rem;
			position: sticky;
			top: 0;
			background: #fff;
		}
		
		.view .col {
			padding: 0 1rem 2rem 1rem;
		}
	}

	@layer components {
		.tweets {
			display: flex;
			flex-direction: column;

			> li {
				border-bottom: 1px solid #ccc;
			}
			
			& a {
				padding: 0.5em 0;
				color: inherit !important;
			}
		}

		:has(> img) {
			display: flex;
			gap: 0.5em;

			&:hover {
				background: aliceblue;
				cursor: pointer;
			}
		}

		.author {
			font-weight: bold;
		}

		img {
			align-self: start;
			width: 3em;
			height: auto;
			aspect-ratio: 1;
			border-radius: 50%;
		}

		a {
			text-decoration: none;
			color: lightblue;

			&:hover, &:active, &:focus, &:visited {
				color: blue;
			}
		}

		.tweet {
			display: flex;
			flex-direction: column;
			gap: 0.5em;

			.handle {
				font-size: 0.9em;
			}

			.content {
				font-size: 1.2em;
			}

			.meta, .rt {
				color: #6a6a6a;
				font-size: 0.8em;
				padding: 0.4rem 0;
			}

			.rt {
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				text-transform: uppercase;
				padding: 0.8rem 0;

				display: flex;
				flex-direction: row;
				gap: 0.4rem;

				& b {
						color: black;
				}
			}
		}
	}
}
</style>


  
  
</head>

<body>
  <div id="home" class="view">
	<h1>Home</h1>
	<div class="col">
		<ul class="tweets">
			<li>
				<a href="#detail2">
					<img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Avatar of Bramus" width="100" height="100">
					<div>
						<div class="author">Bramus</div>
						<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
					</div>
				</a>
			</li>
			<li>
				<a href="#detail">
					<img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Avatar of Bramus" width="100" height="100">
					<div>
						<div class="author">Bramus</div>
						<div class="content">Integer id lacus orci. Vestibulum egestas commodo sagittis. Nulla placerat neque quis nisl rhoncus congue. Mauris viverra, nibh a commodo venenatis, nisi ipsum lobortis purus, sed placerat sapien tellus vitae dui.</div>
					</div>
				</a>
			</li>
			<li>
				<a href="#detail">
					<img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="Avatar of Bramus" width="100" height="100">
					<div>
						<div class="author">Bramus</div>
						<div class="content">Sed dapibus fringilla nibh. Donec aliquam libero nec rhoncus vehicula. Integer a magna posuere nisl scelerisque tristique.</div>
					</div>
				</a>
			&l.........完整代码请登录后点击上方下载按钮下载查看