react实现7种监听滚动下拉加载更多数据入场动画效果代码-html代码-BFW代码库

react实现7种监听滚动下拉加载更多数据入场动画效果代码

代码语言：html

所属分类：其他

代码描述：react实现7种监听滚动下拉加载更多数据入场动画效果代码，包含网格、列表、横向、zippe、rotater、slidey等方式。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/colors-hsl.min.css">

    <style>
  
 
        
        *,
        *:after,
        *:before {
        	box-sizing: border-box;
        }
        
        body {
        	display: grid;
        	place-items: center;
        	min-height: 100vh;
        	background: var(--surface-2);
        	font-family: 'Google Sans', sans-serif, system-ui;
        }
        
        #app {
        	width: 100%;
        	display: flex;
          align-items: center;
          justify-content:center;
          flex-wrap: wrap;
          gap: var(--size-4);
        }
        
        ul {
        	border-radius: var(--md-sys-shape-medium);
        	width: 50vmin;
          min-width: 300px;
        	aspect-ratio: 4 / 6;
        	background: var(--gray-0);
        	display: grid;
        	padding: 0;
        	margin: 0;
        	padding: var(--size-4);
        	gap: var(--size-4);
        	grid-template-columns: repeat(4, 1fr);
        	overflow: auto;
        	list-style-type: none;
          transition: all 0.5s var(--ease-elastic-2);
        }
        
        ul:is(.zipper, .rotater, .grid, .list, .slidey) {
        	overflow-x: hidden;
        }
        
        .card.elevated {
        	padding: 0;
        	margin: 0;
        	background-color: var(--blue-2);
        	min-width: 0;
        	transition: all 0.5s var(--ease-elastic-2);
        }
        
        .card .actions {
        	display: grid;
        	flex-direction: column;
        	grid-template-columns: auto auto;
        	gap: var(--size-2) var(--size-4);
        }
        
        .controls.card.elevated {
        	background-color: var(--md-sys-color-surface);
        }
        
        .grid .card {
        	aspect-ratio: 1;
        	transform: scale(calc(0.25 + (var(--shown, 1) * 0.75)));
        }
        
        .zipper .card {
        	--distance: 250%;
        	aspect-ratio: 1;
        	transform: translateX(
        		calc(
        			(var(--distance) * -1) + (var(--shown, 1) * var(--distance))
        		)
        	) scale(var(--shown, 1)) ;
        }
        
        .zipper li:is(:nth-of-type(n):nth-child(4n),:nth-of-type(4n + 3):nth-child(n)) .card {
        	--distance: -250%;
        	transition: all 0.5s var(--ease-elastic-1);
        }
        
        .slidey .card {
        	--distance: 250%;
        	aspect-ratio: 1;
        	opacity: calc(0.5 + var(--shown, 1));
        	transform: translateX(
        		calc(
        			(var(--distance) * -1) + (var(--shown, 1) * var(--distance))
        		)
        	) scale(calc(0.5 + (var(--shown, 1) * 0.5))) ;
        }
        
        /*.slidey li:is(:nth-of-type(n):nth-child(4n),:nth-of-type(4n + 3):nth-child(n)) .card {
        	--distance: -250%;
        	transition: all 0.5s var(--ease-elastic-1);
        }*/
        
        .rotater .card {
        	aspect-ratio: 1;
        	transform: rotate(calc(
        		((var(--rotation, 0) * -1) + (var(--shown, 1) * var(--rotation, 0))) * 1deg
        	)) scale(var(--shown, 1));
        }
        
        .rotater li:nth-of-type(n) .card {
        	--rotation: -270;
        	/*background: red;*/
        }
        
        .rotater li:nth-of-type(2n) .card {
        	--rotation: -180;
        	/*background: green;*/
        }
        .rotater li:nth-of-type(4n + 3):nth-child(n) .card {
        	--rotation: 180;
        	/*background: orange;*/
        }
        .rotater li:nth-of-type(n):nth-child(4n) .card {
        	--rotation: 270;
        	/*background: purple;*/
        }
        
        li {
        	padding: 0;
        	max-width: 100%;
        }
        
        .list li {
        	min-height: 40px;
          height: 8vmin;
        	grid-column: 1 / -1;
        }
        
        .list .card {
        	height:.........完整代码请登录后点击上方下载按钮下载查看