Question

这种效果的名称是什么？

大家好，我正在以角5进行申请。我已经看到一些页面显示正在加载的组件的形式，而整个页面完全加载该效果将显示。它就像一个装载机，但非常有趣，因为它适用于小型组件。

当您上传附加图片的视频时，Youtube会产生这种效果。

ListView class

你能告诉我这个功能或框架的正确名称是否适合角度？请。

PS：如果我提出的问题可能是明显的或不必要的，我会道歉。我不是在大学学习编程，我是自己做的，这就是为什么我不知道很多术语。

Answer 1

这些被称为skeleton screen。这些只不过是带有动画效果的GIF或普通html，它们在实际数据加载时充当占位符。骨架屏幕有助于提高应用程序的感知性能。

这是一个演示：

// As soon as content is added to the skeleton screen container, the `:empty` pseudo-class won't match anymore and the background will be automatically removed.
document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.demo').innerHTML = '<h1>Injected content.</h1>';
})

/* 
Animated skeleton screen using CSS.

Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
*/
	.demo:empty {
    margin: auto;
		width: 500px;
		height: 600px; /* change height to see repeat-y behavior */
    
		background-image:
			radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			100px 200px, /* circle */
			50px 200px, /* highlight */
			150px 200px,
			350px 200px,
			300px 200px,
			250px 200px;

		background-position:
			0 0, /* circle */
			0 0, /* highlight */
			120px 0,
			120px 40px,
			120px 80px,
			120px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
				0 0,
				100% 0, /* move highlight to right */
				120px 0,
				120px 40px,
				120px 80px,
				120px 120px;
		}
	}

<button>Add content</button>
<div class="demo"></div>

这个效果的名称是什么？

1 个答案: