@awesome-reveal/ veue (音乐)

(原始内容存档于2018-10-21). Reveal-on-scroll 动画为Vue. 环绕内容 <Reveal>,或添加 v-reveal 到一个元素,当它进入取景口时,它会淡出并滑入其中.

• 很简单. 两个组成部分,两个指令, 和几个选项.
• 原产地. 由Intersection Observer和Web Animations API所建,没有动画库.
• SSR准备好了. 服务器发送的内容会一直被隐藏到它揭示,没有闪光.
• 无障碍. 遵循减动偏好,并在焦点上并用平面显示等待内容.
• CSP友好报. 写入无内线样式和无内线脚本.

与Vue 3.5及后作相通.

安装

npm install @awesome-reveal/vue

软件包自动加载其样式表。 只有一个 Astro岛 需要一个步骤.

快开始

<script setup lang="ts">
import { Reveal, vReveal } from "@awesome-reveal/vue";
</script>

<template>
  <Reveal><h1>Hello</h1></Reveal>
  <p v-reveal>No wrapper element</p>
</template>

内容在进入取景口时会逐渐淡出并向上移动一次.

使用量

Reveal 财务报告和审定财务报表 v-reveal 接受同样的选择. Reveal 制作一个 div 围绕它的槽 as 更改标签. v-reveal 动画一个您已经渲染的元素 .

选择入口

from 设置元素的起始位置。 一边会变淡 有24个px运动 默认是 "bottom"。 。 。 .

<template>
  <Reveal from="left">From the left</Reveal>
  <p v-reveal="{ from: 'right' }">From the right</p>
</template>

对于不同的出入口,给出一个起步状态. 元素动画从此状态到中性值:完全不透明,没有偏移,比例为1,不旋转和不模糊. 元素自身对动画属性的价值仅在入场后适用. 启动状态取代默认状态, 所以添加 opacity: 0 如果你想要一个淡出.

<template>
  <Reveal :from="{ opacity: 0 }">Fade only</Reveal>
  <Reveal :from="{ scale: 0.9 }">Scale only</Reveal>
  <Reveal :from="{ opacity: 0, x: '-100%', rotate: '-5deg', blur: 8 }">All together</Reveal>
</template>

启动状态有属性 opacity, (中文(简体) ), x, (中文(简体) ), y, (中文(简体) ), scale, (中文(简体) ), rotate 财务报告和审定财务报表 blur数字 x, (中文(简体) ), y 或者说 blur ,数字为 rotate 是度数。 一个字符串可以包含带有其单位的 CSS 值.

使用自己的键框

全面控制,如放宽习俗,给予土著 键框 改为 from。以元素的休息风格结束它们.

<template>
  <Reveal
    :keyframes="[
      { opacity: 0, transform: 'scale(.8)', easing: 'cubic-bezier(.34,1.56,.64,1)' },
      { opacity: 1, transform: 'scale(1)' },
    ]"
  >
    Bounce in
  </Reveal>
</template>

更改时间

<template>
  <Reveal as="h2" from="left" :duration="800">Title</Reveal>
  <Reveal :from="{ opacity: 0 }" :delay="200">Starts after the title</Reveal>
  <Reveal :threshold="0.5">Reveals when half of it is visible</Reveal>
</template>

保留 delay 低于约300毫秒。 长时间的延迟让内容在用户快速滚动时出现很晚.

打开列表

Cascade 财务报告和审定财务报表 v-cascade 当容器进入景点时,一个接一个地揭示直系子女. interval 设定两个孩子之间的时间,默认时间为80毫秒.

<script setup lang="ts">
import { Cascade, vCascade } from "@awesome-reveal/vue";
</script>

<template>
  <Cascade as="ul" from="left" :interval="120">
    <li>Fast</li>
    <li>Small</li>
  </Cascade>
  <ol v-cascade>
    <li>Install</li>
    <li>Import</li>
  </ol>
</template>

对于长列表,虚拟列表,或比取景端高的网格,使用 Reveal 或者说 v-reveal 每个项目。 级联同时安排所有的孩子,所以最后一个孩子开始晚或出视.

控制显示

when 控制你所在的入口. true 弹奏它,和 false 以无出局动画重置. 与 null 或没有值,取景器控制它。 变化 true 改为 null 保持元素显示.

when 不显示或隐藏内容。 与 when: false,元素是透明的,但屏幕阅读器读取它,键盘可以将它聚焦. inert 不隐藏内容:它只屏蔽焦点、点击和辅助技术。 要隐藏内容, 还设置 hidden,或使用 v-if数字 :

<script setup lang="ts">
import { ref } from "vue";
import { Reveal } from "@awesome-reveal/vue";

const open = ref(false);
</script>

<template>
  <button :aria-expanded="open" @click="open = !open">Toggle</button>
  <Reveal :when="open" :hidden="!open" :from="{ opacity: 0 }">Details</Reveal>
</template>

准备再次出场 when 改为 false,然后改为 true。 。 。 .

在显示处运行代码

Reveal 发射 reveal 与显示开始时的元素,并给出 revealed 切入默认位置. v-reveal 接受一个 onReveal 选项。 等待入口的结束,等待 finished 动画中的承诺:

<script setup lang="ts">
import { Reveal } from "@awesome-reveal/vue";

function entered(element: Element) {
  Promise.all(element.getAnimations().map((animation) => animation.finished))
    .then(() => element.classList.add("entered"))
    .catch(() => {});
}
</script>

<template>
  <Reveal v-slot="{ revealed }" @reveal="entered">
    {{ revealed ? "Hello" : "Waiting" }}
  </Reveal>
</template>

承诺在入口提前停止时拒绝,例如之后 when: false 或无所取出. 抓住拒绝。 当没有入口游戏时,例如减少运动时,它立即解决。 它也等待着您自己对元素的动画. 用于级联 getAnimations({ subtree: true })因为孩子们有活力 永远重复的动画永远不会完成,所以承诺是不会解决的.

API 密码

<Reveal>, (中文(简体) ), <Cascade>, (中文(简体) ), v-reveal 财务报告和审定财务报表 v-cascade

发射部件 reveal 与元素,给予 revealed ,然后将其他属性传递给已渲染的元素.

行为

• 入门一回打. 观察止于出处.
• 这个 reveal 事件和 onReveal 在没有入口播放时也会运行,例如减少动作或焦点. 之后 when: false下一次揭发会再次曝光.
• 更改为 when 或者说 threshold 立即申请。 下一次披露时将适用对其他选项的更改.
• when: false 期间 delay 重新设置出入口,出入口不播放.

样式表设置

软件包样式表隐藏服务器提交的内容,直到其披露为止. 软件包模块导入它, 您的捆绑器将其添加到页面中 。 Astro岛需要一步:Astro没有获得一个岛屿的CSS,所以在页面或布局中导入.

---
import "@awesome-reveal/vue/reveal.css";
---

服务器侧渲染

服务器标记被隐藏到元素显示为止 。 如果脚本失败,内容会在5秒后显示. 水合物急切地揭示出含量:懒惰的水合物,例如: hydrateOnVisible() 或 纳克特 hydrate-on-visible 组件,内容可以显示,然后再次隐藏,直到揭示.

无障碍

• 与 prefers-reduced-motion: reduce,所有的内容立即显示,没有动画。 减少动议比入口优先 when: false,所以请 reveal 事件和 onReveal 别再跑了.
• 在等待元素中的焦点立刻显示,所以键盘用户不会将隐性内容聚焦. 这不适用于 when: false。 。 。 .
• 延迟或入口期间的注意力集中,立即完成入口.
• 在脚本加载前,服务器标记显示同时它有焦点.
• 等待内容显示为打印和JavaScript关闭时.
• 隐藏的内容留在无障碍树上. 不要让重要内容依赖于装饰运动.

很高兴知道

代理技能

软件包包括 adding-reveal-animations 技能,它教一个编码代理 API 。 Pnpm可以在你批准后将它链接到你的项目中.

许可证

麻省理工学院