react awesome reveal下载 - react awesome reveal源代码下载

react awesome reveal

网站数据

[email protected]

下载

反应很棒的揭示

提示

如果您喜欢这个库，请考虑支持其创建者。

React Awesome揭示是一个用打字稿编写的React应用程序的库，该库使用交叉点观察者API添加了揭示动画，以检测元素何时出现在视口中。动画是由情感内部提供的，并作为CSS动画实现，以受益于硬件加速。

特征

？现代堆栈- 它是为现代反应而建造的，并支持React 18
？打字稿支持- 用打字稿编写以改进DX
？轻量级- 您的项目的足迹很少
使用本机API - 交叉点观察者和CSS动画现在得到所有浏览器的支持
快速- 由于使用本地异步API和硬件加速度，黄油良好的经验
？完全自定义- 定义自定义动画，让库渲染它们
SSR支持- 服务器端渲染在开箱即用
？可摇晃的树木- 只有您使用的零件才会包含在您的最终捆绑包中

安装

要添加此软件包作为您应用程序的依赖性，只需运行

npm install react-awesome-reveal @emotion/react --save

或者，如果您使用的是纱线：

yarn add react-awesome-reveal @emotion/react

或者，如果您正在使用PNPM（我强烈建议）：

pnpm add react-awesome-reveal @emotion/react

快速开始

来自React Awesome的导入效果向您的React组件显示，例如Fade效果：

 import { Fade } from "react-awesome-reveal" ;

然后只需包装要动画的组件：

 < Fade >
  < p > I will gently appear as I enter the viewport </ p >
</ Fade >

支持的效果

当前支持的效果是Bounce ， Fade ， Flip ， Hinge ， JackInTheBox ， Roll ， Rotate ， Slide和Zoom 。有关详细信息，请参阅Animate.css文档。

注意者

自第3版以来，关注者的动画被AttentionSeeker组件包裹了，该动画接受了一种称为effect ，该效果指定动画的渲染（默认为"bounce” ）。受支持的效果是： ”bounce" ， "flash" ， "headShake” ，“ "heartBeat" ，“ "jello” ， "pulse" ”， "rubberBand" ， “shake” ， “shakeX" ，“ shakey”，“ shakey”，“ swing "shakeY” ， "swing” ， "tada"和“wobble” 。

同样，有关详细信息，请参阅Animate.css文档。

道具

您可以将以下道具传递给动画组件以自定义行为：

支柱	描述	值	默认
`cascade`	如果设置，则揭示动画的每个孩子会自动分配一个延迟，以考虑其前身（孩子`i` `i * delay * damping` milliseconds之后进入视口） - 对列表项目的动画非常有用。	`true`还是`false`	`false`
`damping`	影响级联动画中每个动画组件的延迟的因素。如果`damping = 1` ，则延迟将等于动画持续时间。如果`damping < 1` ，则延迟将低于动画持续时间；如果`damping > 1` ，则延迟将大于动画持续时间。	`number`	`0.5` （这意味着延迟将是动画持续时间的一半）
`direction`	动画的起源（如果适用）。	通常`"down"` ， `"left"` ， `"right"`或`"up"` ，但在代码中记录了一些例外	`undefined`
`delay`	是时候等待动画开始（以毫秒为单位）了。	`number`	`0`
`duration`	动画持续时间（毫秒）。	`number`	`1000`
`fraction`	在触发动画之前，应该在视口中有多少元素。	`0`到`1`之间的`number`	`0`
`triggerOnce`	指定动画是否应一次或每次运行一次，或者每次都会进入/退出/重新输入视口。	`true`还是`false`	`false`
`className`	添加到容器元素的类名称。	`string`	`undefined`
`style`	内联样式添加到容器元素中。	`React.CSSProperties`	`undefined`
`childClassName`	班级名称要添加到子元素中。	`string`	`undefined`
`childStyle`	内联样式添加到子元素中。	`React.CSSProperties`	`undefined`
`onVisibilityChange`	当元素输入或离开视口时执行回调。如果要动画一个以上的元素，则在每个元素上调用此功能。	`(inView: boolean, entry: IntersectionObserverEntry) => void`	`undefined`

例子

为了触发动画，只有第一次进入视口：

 < Slide triggerOnce >
  < p > I will animate only the first time you see me </ p >
</ Slide >

链接多个动画

要将多个动画链在一起，请将cascade Prop设置为true ：

 < Fade cascade >
  < p > I enter first... </ p >
  < p > ...then comes my turn... </ p >
  < p > ...and finally you see me! </ p >
</ Fade >

使用damping道具来改变每个孩子逐渐出现的延迟：

 < Fade cascade damping = { 0.1 } >
  < p > I enter first... </ p >
  < p > ...then comes my turn... </ p >
  < p > ...and finally you see me! </ p >
</ Fade >

自定义动画

从版本3.2.0开始，您可以定义自定义动画！只需导入Reveal组件（这是库的默认导出 - 给它您想要的名称），然后将其传递给keyframes框架：

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

const customAnimation = keyframes `
  from {
    opacity: 0;
    transform: translate3d(-200px, -100px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
` ;

function CustomAnimation ( { children } ) {
  return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
}

如果没有传递keyframes支柱，则默认的渲染动画是左侧的淡入入口（等效到<Fade direction="left">...</Fade> ）。

其他道具

您也可以通过这些道具来Reveal ：

cascade
damping
delay
duration
fraction
triggerOnce
className和childClassName
style和childStyle
onVisibilityChange

交叉观察者

相交观察者是用于确定视口内部元素是否在视口内的API。浏览器支持确实很好 - 随着Safari在12.1中增加了支持，所有主要浏览器现在都在本地支持交叉点观察者。

如果您需要支持旧浏览器，请添加与交叉点观察者API的多填充。

多填充

您可以直接添加polyfill或使用polyfill.io之类的服务在需要时添加它。

yarn add intersection-observer

然后将其导入您的应用程序：

 import "intersection-observer" ;

如果您使用的是WebPack（或类似），则可以使用动态导入量仅在需要时加载polyfill。基本实施可能看起来像这样：

 /**
 * Do feature detection, to figure out which polyfills needs to be imported.
 **/
async function loadPolyfills ( ) {
  if ( typeof window . IntersectionObserver === "undefined" ) {
    await import ( "intersection-observer" ) ;
  }
}