渐显

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

这是什么

一个能够让页面上的所有东西平滑渐显而不是立即在页面加载之后出现的组件。

渐变可以是交错的，也就是页面上的每一件东西都一个接一个地出现而不是全都一次性出现。

用法

在任意维基上：

[[include :scp-wiki:component:fade-in speed=1]]

speed=1：所有东西都同时显现
speed=2：所有东西都在上一个东西显现后0.5s显现
speed=3：所有东西都在上一个东西显现后0.25s显现

说明

渐显效果只会应用在是#page-content的直系子元素上。它不会应用到嵌套元素（例如在blockquote（引用框）或div中的东西）或者页面的其它部分（比如侧边栏）中。

（如果你的页面上有其它元素会与此冲突（比如ACS动画）你可以简单地将不确定的动画元素包裹在一个div里面）。

它也只能应用到页面的前35个元素中，且在此以后的所有东西都会同时出现。这对于读者打开页面后的平滑加载阅读体验已经足够了，但如果他们想直接滚动到页面底部的话，也同样可以无需等待太长时间。

---

源代码

#page-title, #breadcrumbs, #page-content > * {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards;
}
 
#page-title { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:root {
  --fade-in-delay: 0s;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(16) { animation-delay: calc(16 * var(--fade-in-delay)); }
#page-content > :nth-child(17) { animation-delay: calc(17 * var(--fade-in-delay)); }
#page-content > :nth-child(18) { animation-delay: calc(18 * var(--fade-in-delay)); }
#page-content > :nth-child(19) { animation-delay: calc(19 * var(--fade-in-delay)); }
#page-content > :nth-child(20) { animation-delay: calc(20 * var(--fade-in-delay)); }
#page-content > :nth-child(21) { animation-delay: calc(21 * var(--fade-in-delay)); }
#page-content > :nth-child(22) { animation-delay: calc(22 * var(--fade-in-delay)); }
#page-content > :nth-child(23) { animation-delay: calc(23 * var(--fade-in-delay)); }
#page-content > :nth-child(24) { animation-delay: calc(24 * var(--fade-in-delay)); }
#page-content > :nth-child(25) { animation-delay: calc(25 * var(--fade-in-delay)); }
#page-content > :nth-child(26) { animation-delay: calc(26 * var(--fade-in-delay)); }
#page-content > :nth-child(27) { animation-delay: calc(27 * var(--fade-in-delay)); }
#page-content > :nth-child(28) { animation-delay: calc(28 * var(--fade-in-delay)); }
#page-content > :nth-child(29) { animation-delay: calc(29 * var(--fade-in-delay)); }
#page-content > :nth-child(30) { animation-delay: calc(30 * var(--fade-in-delay)); }
#page-content > :nth-child(31) { animation-delay: calc(31 * var(--fade-in-delay)); }
#page-content > :nth-child(32) { animation-delay: calc(32 * var(--fade-in-delay)); }
#page-content > :nth-child(33) { animation-delay: calc(33 * var(--fade-in-delay)); }
#page-content > :nth-child(34) { animation-delay: calc(34 * var(--fade-in-delay)); }
#page-content > :nth-child(35) { animation-delay: calc(35 * var(--fade-in-delay)); }
#page-content > :nth-child(n+35) { animation-delay: calc(36 * var(--fade-in-delay)); }

:root {
   --fade-in-delay: 0.5s;
}

:root {
  --fade-in-delay: 0.25s;
}