React动态效果——animate.css

1.React引入Animate.css

animate官网
animate官网查看需要的动效
react项目引入animate.css

npm i animate.css
npm i react-addons-css-transition-group

封装react动效木偶组件

import React from 'react'
import "animate.css";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
class Transition extends React.Component {constructor(props){super(props);this.state = {}}render(){return(<div><ReactCSSTransitionGrouptransitionEnter={true}transitionLeave={true}transitionEnterTimeout={2500}transitionLeaveTimeout={1500}transitionName="animated">{this.props.children}</ReactCSSTransitionGroup></div>)}
}
export default Transition;

调用Tansition木偶组件

state = {transition:"lightSpeedIn",icon:"icon-mulu"}hanldleMenu = ()=>{this.setState({icon:'icon-mulu'=== this.state.icon ? 'icon-guanbi':'icon-mulu',transition:'rotateIn' === this.state.transition ? 'lightSpeedIn' : 'rotateIn'})}render(){return(<Transition><div onClick={this.hanldleMenu}style={{width:20}}key="amache"className={`animated ${this.state.transition}`}><i className={`iconfont ${this.state.icon}`} style={{fontSize:20}}/></div></Transition>）}

animate.css官网中的class类名，修改state中的transition

React动态效果——animate.css相关推荐

react使用animate.css完成动画
1.引入依赖库 cnpm i animate.css cnpm i react-addons-css-transition-group 2.导入模块 import "animate.css& ...
react基于WOW.js和Animate.css实现特定位置的动画执行
写在前面:对于css3动画小白的我,自己动手写动画确实很艰难,但是无意间了解到有相关库可以实现,为什么不用呢,嘿嘿(当然也在学css3啦) 文章目录效果展示官网文档实现步骤 1.下载WOW.js ...
animate.css源码
animate.css源码 animate.css源码,关于如何使用animate.css,可参考 vue+ts或者react+ts如何使用animate.css. /*!动画属性:animation ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
Animate.css介绍及使用教程
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用引入 anim ...
animate css组合,Vue---CSS动画之animate.css库
animation完成一个动画效果代码基本结构搭建使用与过渡动画相同的代码结构 hello world change var vm = new Vue({ el:'#root', data:{ s ...
使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...

React动态效果——animate.css

1.React引入Animate.css

React动态效果——animate.css相关推荐

最新文章

热门文章