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

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

代码语言：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";
		}
	}
	
.........完整代码请登录后点击上方下载按钮下载查看