https://github.com/javaluo/react-words

Text Animate 简单的文字动画组件 - 淡入淡出 - 翻入翻出 - 放大放小什么的
https://github.com/javaluo/react-words

react

Last synced: 8 months ago
JSON representation

Text Animate 简单的文字动画组件 - 淡入淡出 - 翻入翻出 - 放大放小什么的

• Host: GitHub
• URL: https://github.com/javaluo/react-words
• Owner: javaLuo
• License: apache-2.0
• Created: 2017-11-29T03:03:11.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-09T09:33:35.000Z (almost 8 years ago)
• Last Synced: 2025-03-18T13:27:27.553Z (9 months ago)
• Topics: react
• Language: JavaScript
• Size: 66.4 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-words

[![npm](https://img.shields.io/npm/dy/react-words.svg)](https://www.npmjs.com/package/react-words)

一个简单的React文字效果组件


CSS3实现

## 示例图 目前拥有以下几种效果

type = 0 淡入淡出：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/1.gif)


type = 1 大小模糊改变：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/2.gif)


type = 2 大小改变：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/3.gif)


type = 3 伸缩：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/4.gif)


type = 4 上下改变：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/5.gif)


type = 5 3D翻转：
 ![image](https://github.com/javaLuo/react-words/blob/master/example/assets/6.gif)


## 1. 安装

````

npm install react-words --save

````

## 2. 使用

````

import Words from 'react-words';

 Hello World!

 

````

## 3. 参数

````bash

show                # boolean 必填 控制显示还是隐藏，true/false，通过改变这个值来触发动画效果

type                # number  选择一种动画效果 0/1/2/3/4/5，默认0

speed               # number  单个文字的动画执行速度 默认300，单位ms

````

## 4. 说明

 文字不要太多了，文字越多，执行一次动画所需的时间就越长