@ aweosome-reveal/反应

相声回放动画. 环绕内容 <Reveal>,当它进入取景口时会逐渐淡出并滑入.

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

与回放18和19合作.

安装

npm install @awesome-reveal/react

软件包自动加载其样式表。 仅 两个设置 需要一个步骤.

快开始

import { Reveal } from "@awesome-reveal/react";

export const Hero = () => (
  <Reveal>
    <h1>Hello</h1>
  </Reveal>
);

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

使用量

选择入口

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

<Reveal from="left">From the left</Reveal>

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

<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>

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

使用自己的键框

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

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

更改时间

<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>

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

打开列表

Cascade 当它进入景点时, 它的直系子孙一个接一个地显现出来. interval 设定两个孩子之间的时间,默认时间为80毫秒.

import { Cascade } from "@awesome-reveal/react";

export const Features = () => (
  <Cascade as="ul" from="left" interval={120}>
    <li>Fast</li>
    <li>Small</li>
    <li>Accessible</li>
  </Cascade>
);

对于长列表,虚拟列表,或比取景端高的网格,将每个项目围入 Reveal 换句话说 级联同时安排所有的孩子,所以最后一个孩子开始晚或出视.

激活你自己的元素

Reveal 制作一个 div 环绕着孩子 要更改标签, 请使用 as。将您自己的元素以无包装方式激活,使用 useReveal数字 :

import { useReveal } from "@awesome-reveal/react";

export function Card() {
  const { getProps, revealed } = useReveal<HTMLElement>({ from: "left", threshold: 0.3 });
  return <article {...getProps({ className: "card" })}>{revealed ? "Hello" : "Waiting"}</article>;
}

展开 getProps() 一个DOM元素。 如果你有你自己的话 ref,给它 getProps(),而钩子将其合并. 对于自定义组件,请通过 ref 编辑 data-awesome-reveal dOM元素的道具. useCascade 连锁店也一样.

控制显示

when 控制你所在的入口. true 弹奏它,和 false 以无出局动画重置. 无 when风景区控制着它 变化 true 以至没有值来显示元素.

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

import { useState } from "react";
import { Reveal } from "@awesome-reveal/react";

export function Details() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button aria-expanded={open} onClick={() => setOpen(!open)}>
        Toggle
      </button>
      <Reveal when={open} hidden={!open} from={{ opacity: 0 }}>
        Details
      </Reveal>
    </>
  );
}

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

在显示处运行代码

onReveal 打开时获得元素。 等待入口的结束,等待 finished 它的动画承诺:

import { Reveal } from "@awesome-reveal/react";

export const Card = () => (
  <Reveal
    onReveal={(element) =>
      Promise.all(element.getAnimations().map((animation) => animation.finished))
        .then(() => element.classList.add("entered"))
        .catch(() => {})
    }
  >
    Hello
  </Reveal>
);

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

API 密码

<Reveal> 财务报告和审定财务报表 <Cascade>

部件通过其他道具,例如 className 财务报告和审定财务报表 ref,对已交付元素.

useReveal(options?) 财务报告和审定财务报表 useCascade(options?)

他们接受同样的选择,但 as它们返回 getProps(props?),它为您的元素提供了道具,以及 revealed,它显示元素是否被揭示.

行为

• 入门一回打. 观察止于出处.
• onReveal 在没有入场演奏时也会运行,例如减少运动或焦点. 它运行一次每个披露, 也在严格模式。 之后 when={false}下一次揭发会再次运行它.
• 更改为 when 或者说 threshold 立即申请。 下一次披露时将适用对其他选项的更改.
• when={false} 期间 delay 重新设置出入口,出入口不播放.

样式表设置

软件包样式表隐藏服务器提交的内容,直到其披露为止. 软件包模块导入它, 您的捆绑器将其添加到页面中 。 两个设置需要一步:

• 阿斯特罗岛. Astro没有获得一个岛屿的CSS. 在页面或布局中导入 :

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

• 下一页 有网络包装的路由器. Next.js 不允许软件包导入全局CSS. 将软件包添加到 transpilePackages数字 :

  // next.config.mjs
  export default { transpilePackages: ["@awesome-reveal/react"] };
  

Next.js App路由器和涡轮包不需要任何步骤.

服务器侧渲染

Reveal 财务报告和审定财务报表 Cascade 是客户端组件,所以服务器组件可以用可串行道具,也可以用本地键框来制作. 钩子和 onReveal 需要客户端组件.

服务器标记被隐藏到元素显示为止 。 如果脚本失败,内容会在5秒后显示. 水合物急切地揭示出内容:如果水合物需要超过5秒,则内容显示,然后再次隐藏到揭示为止.

无障碍

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

很高兴知道

从 v4 迁移

react-awesome-reveal 版本5再导出此包. 升级或安装 @awesome-reveal/react然后采取这些步骤:

1. 如果没有其他代码使用"情感",请去掉.
2. 导入 Reveal 作为命名导出。 v4 还存在默认导出.
3. 将每个效果组件替换为 Reveal数字 :
   • 为了消退,使用 from={{ opacity: 0 }}。 。 。 .
   • 为方向运动设定 from 到元素开始的一侧。 4号 up 变成 from="bottom",以及 down 变成 from="top"。 。 。 .
   • 对于更复杂的效果,使用本地键框.
4. 替换 fraction 与 threshold。 。 。 .
5. 删除 triggerOnce。在v4中,入口默认每次播放。 现在它演奏一次。 再来一次,准备好 when 改为 false,然后改为 true。 。 。 .
6. 替换 cascade 与 Cascade 组件。 设定 interval 到v4时 duration * damping,以毫秒计.
7. 自己写短信 库不分割文本 .

默认持续时间为600 ms,v4使用1000 ms. 一个v4 <Reveal> 没有 keyframes 从左边输入。 为了保持这个运动,使用 from={{ opacity: 0, x: "-100%" }}。 。 。 . Reveal 使一个元素围绕它的所有儿童,v4将每个元素的孩子包裹在一个 div。 。 。 .

代理技能

套件包括编码代理的两种技能. Pnpm可以在你批准后 把它们与你的计划联系起来.

• adding-reveal-animations 教这个 API.
• migrating-from-v4 列出 v4 的所有更改.

许可证

麻省理工学院