@ awesoome-reveal/ 核心

平原JavaScript中的回光相接动画. 给一个选择器,元素在进入取景口时会淡出并滑入.

• 小一点. 不足 2 kB gziped, 没有依赖性和样式表 .
• 原产地. 由互通观察员和网络动画API所建.
• 无障碍. 遵循减动偏好,并在焦点上并用平面显示等待内容.
• CSP友好报. 写出无内线样式,因此它与严格的内容安全政策相配合.

你使用React,Vue还是Astro? 使用 @awesome-reveal/react, (中文(简体) ), @awesome-reveal/vue 或者说 @awesome-reveal/astro。它们也会隐藏服务器所传送的内容,直到它揭示出来.

安装

npm install @awesome-reveal/core

快开始

import { cascade, reveal } from "@awesome-reveal/core";

reveal(".card"); // Fade in and move up
reveal(".hero", { from: "left" }); // Fade in from the left
cascade(".features"); // Reveal the children of .features one after the other

每个元素都会动画一次,当它进入取景口时.

使用量

选择入口

from 设置元素的起始位置。 一方让一个淡出 和24px运动:

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

import { reveal } from "@awesome-reveal/core";

reveal(".caption", { from: { opacity: 0 } }); // Fade only
reveal(".logo", { from: { scale: 0.9 } }); // Scale only
reveal(".card", { from: { opacity: 0, x: "-100%", rotate: "-5deg", blur: "0.5rem" } });

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

使用自己的键框

全面控制,如放宽习俗,给予土著 键框 改为 from数字 :

import { reveal } from "@awesome-reveal/core";

reveal(".logo", {
  keyframes: [
    { opacity: 0, transform: "scale(.8)", easing: "cubic-bezier(.34,1.56,.64,1)" },
    { opacity: 1, transform: "scale(1)" },
  ],
});

• 在元素的休息样式下结束键框. 动画在结束后没有保留其最后一个键框.
• 给第一个键框提供明确的值 。 打开的 WebKit 错误(212409 (英语))可以从更早的动画中取出隐含的起动值.
• 以元素本身的值结尾,以中性添加剂键框等结尾 { opacity: 0, composite: "add" }。 。 。 .

更改时间

import { reveal } from "@awesome-reveal/core";

reveal(".hero h1", { from: "left", duration: 800 });
reveal(".hero p", { from: { opacity: 0 }, delay: 200 }); // Starts after the heading
reveal(".chart", { threshold: 0.5 }); // Reveals when half of it is visible

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

打开列表

cascade() 当容器进入取景口时,一个接一个地揭示容器的直接子女。 处于位置的儿童 index 开始于 delay + index * interval 毫秒长.

import { cascade } from "@awesome-reveal/core";

cascade(".features", { from: { opacity: 0, y: 16 }, interval: 120 });

对于长列表,或者比取景口高的网格,使用 reveal(".item") 换句话说 级联同时安排所有的孩子,所以最后一个孩子开始晚或出视.

清理

每一次通话都返回一个手柄. 打电话 dispose() 当您在元素显示前将其删除时, 例如当一个单页应用程序更改路径时 :

import { reveal } from "@awesome-reveal/core";

const handle = reveal(".card");

// Later, when you remove the cards:
handle.dispose();

dispose() 停止观察并取消动画,元素回归自己的风格. 在呼叫完成后, 核心不提及元素, 所以你不需要 dispose()。 。 。 .

手动播放一个入口

有些内容没有到达观察者手中,例如其轨道剪辑的旋转木马滑行. 为了播放它的等待入口,播放它的暂停动画:

import { reveal } from "@awesome-reveal/core";

reveal(".slide", { from: "left" });

export function playEntrance(slide: Element) {
  for (const animation of slide.getAnimations()) {
    if (animation.playState === "paused") animation.play();
  }
}

对于级联,呼叫 getAnimations({ subtree: true }) 在容器上。 循环在元素上还播放了您自己的暂停动画.

API 密码

reveal(target, options?)

进入取景口时揭示出每个目标. 回返a RevealHandle。 。 。 .

cascade(target, options?)

揭示每个目标的直接元素子,一个接一个地,当目标进入取景口时. 回返a RevealHandle。 。 。 .

目标

target 其中包括:

• 一个元素
• a CSS 选择器
• 元素可移动
• 类似数组的集合,例如 children

Core一次找到目标 和级联孩子 当你调用功能时 它看不到您稍后添加的元素 .

选项

软件包还导出类型 Side, (中文(简体) ), StartState, (中文(简体) ), RevealOptions, (中文(简体) ), CascadeOptions, (中文(简体) ), RevealTarget 财务报告和审定财务报表 RevealHandle编辑 @awesome-reveal/core/adapter 条目是用于官方框架软件包。 这不是一个公共API.

无障碍

• 与 prefers-reduced-motion: reduce,所有内容立即显示,没有动画和延迟。 如果偏好发生变化,核心会取消等待和运行中的动画.
• 在等待元素中的焦点立刻显示,所以键盘用户不会将隐性内容聚焦. 集中在等待级联的容器里 显示它的所有儿童.
• 延迟或入口期间的注意力集中,立即完成入口.
• 等待内容显示为打印 。 印后再相等. 核心用户 beforeprint 财务报告和审定财务报表 afterprint 事件,所以开发工具中的打印仿真不会显示内容.
• 隐藏的内容留在无障碍树上. 不要让重要内容依赖于装饰运动.

服务器侧渲染

您可以导入服务器上的软件包, 但打电话 reveal() 财务报告和审定财务报表 cascade() 仅在浏览器中。 Core在您的脚本运行前不隐藏内容, 因此服务器发送的内容可以显示, 然后是动画 。 React, Vue 和 Astro 包用样式表隐藏它.

很高兴知道

浏览器支持

Chrome 104, Edge 104, Firefox 74和Safari 14.1 (iOS 14.5) 或后作. 本地密钥框架 composite 需要Firefox 80或Safari 16号。 没有互通观察员,入口会同时出场. 无 Element.animate(),内容显示没有动画。 在这两种情况下,内容都无法隐藏.

代理技能

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

许可证

麻省理工学院