时间:2021-07-01 10:21:17 帮助过:6人阅读
搜索了网上关于react动画的,很多的答案都是很久以前的了老版本了,而现在官方提供的是叫react-transition-group
它是以前两个的合体版本,所以写下这个记录一下,同时也给一些需要的猿门给一些小的提示。
1、安装
# npm npm install react-transition-group --save # yarn yarn add react-transition-group
而官方提供的三个组建Transition
,CSSTransition
,TransitonGroup
。
过渡组件(Transiton)允许您用一个简单的声明性API描述随着时间的推移从一个组件状态到另一个组件状态的转换。最常用的是用来动画一个组件的安装和卸载,但也可以用来描述在适当的过渡状态。默认情况下,该组件不会更改其呈现的组件的行为,它只跟踪组件的“进入”和“退出”的状态。由你来为这些状态定义效果。(翻译)
实际的情况就是你如果只写这个组件是没有任何的效果的,就和你写一个p一样。所以你需要给他们赋予一些参数才可以。例如下面这个例子
//自己简单的封装了一个,该有的参数都由了,可以自行粘贴在自己的代码里面去试试。 class Fade extends React.Component { constructor(props) { super(props); } done =() => { // console.log('结束了') } addaddEndListener = (node) => { //原生时间transition运动的事件 node.addEventListener('transitionend', this.done, false); } // 三个进入状态的事件,可以做你想做的事情 onEnter = (node, isAppearing) => { console.log(isAppearing, 'onEnter') } onEntering = (node, isAppearing) => { console.log(isAppearing, 'onEntering') } onEntered = (node, isAppearing) => { console.log(isAppearing, 'onEntered') } // 三个退出的状态的事件 onExit = (node) => { console.log('onExit') } onExiting = () => { console.log('onExiting') } onExited = () => { console.log('onExited') this.props.self() } render() { const { in: inProp, dur} = this.props; const defaultStyle = { transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`, transform: 'translateX(100px)', opacity: '0' } const transitionStyles = { entering: { transform: 'translateX(100px)', opacity: '0'}, entered: { transform: 'translateX(0px)', opacity: '1' }, exiting: {transform: 'translateX(0px)', opacity: '1'}, exited: {transform: 'translateX(0px)', opacity: '0'} }; const duration = { enter: 300, exit: 300, } // 上面的都是基本参数,样式的转变以及时间的设定,具体的可以看官网文档 // 样式也可以写成className 例如<MyComponent className={`fade fade-${status}`} /> return ( <Transition onEnter={this.onEnter} onEntering={this.onEntering} onEntered={this.onEntered} onExit={this.onExit} onExiting={this.onExiting} onExited={this.onExited} addEndListener={this.addaddEndListener} in={inProp} unmountOnExit={false} // 为true 代表退出的时候移除dom appear={true} // 为true 渲染的时候就直接执行动画,默认false, timeout={duration} > { state => { console.log(state, '###') //你可以很直观的看到组件加载和卸载时候的状态 return( <p style={{ ...defaultStyle, ...transitionStyles[state] }}> {this.props.children} </p> ) } } </Transition> ); } }
其中上面的状态有四种:
entering entered exiting exited
组件的初始化状态都停留在exited
上面就是写的一个最基本的例子,下面是如何的调用
let num = 1; class Dnd extends React.Component { state = { ins: true, current: 1, dom: <p className={l.test}> ceshi weizhi {num} </p> } handle = (bool) => { this.setState({ test: !bool }) } end = () => { const that = this; num = num + 1; setTimeout(function () { that.setState({ test: true, dom: <p className={l.test}> 888888 {num} </p> }) }, 500) } render () { const { location } = this.props const { test } = this.state; return ( <MainLayout location={location}> <Button onClick={this.handle.bind(null, this.state.test)}>点击transition</Button> <Fade in={this.state.test} self={this.end}> {this.state.dom} </Fade> </MainLayout> ) } } // 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。
这个组件大概就是这样的,这样适合写一个tab类型的页面,在切换的时候可以展示不同的dom
此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同,参数为:classNames
参数:(主要)in, timeout, unmountOnExit, classNames, 用法同Transition。看如下例子:
state = { star: false } <Button onClick={this.handleStar.bind(null, star)}>start</Button> <CSSTransition in={star} timeout={300} classNames="star" unmountOnExit > <p className="star">⭐</p> </CSSTransition>
效果是点击button 显示星星,在点击消失星星的动画!
参数classNames="star"
, 组件会找对应状态的className, 如下
.star { display: inline-block; margin-left: 0.5rem; transform: scale(1.25); } .star-enter { opacity: 0.01; transform: translateY(-100%) scale(0.75); } .star-enter-active { opacity: 1; transform: translateY(0%) scale(1.25); transition: all 300ms ease-out; } .star-exit { opacity: 1; transform: scale(1.25); } .star-exit-active { opacity: 0; transform: scale(4); transition: all 300ms ease-in; }
依次执行的顺序是
1、星星显示 对应的class为star-enter star-enter-active 动画走完为star-enter-done 2、星星消失 对应的class为star-exit star-exit-active 动画走完为star-exit-done
如果按照官网的解释就是如下, 有兴趣的可以自行去试一试。
classNames={{ appear: 'my-appear', appearActive: 'my-active-appear', enter: 'my-enter', enterActive: 'my-active-enter', enterDone: 'my-done-enter, exit: 'my-exit', exitActive: 'my-active-exit', exitDone: 'my-done-exit, }}
每个阶段的钩子函数同Transition.
一看group就知道肯定是列表形态的动画了!但是看了官网后知道,TransitionGroup不提供任何形式的动画,具体的动画取决与你包裹的Transition || CSSTransition的动画,所以你可以在列表里面做出不同类型的动画出来。下面来看一个例子
class List extends React.Component { constructor(props) { super(props); this.state = { items: [ { id: 1, text: 'Buy eggs' }, { id: 2, text: 'Pay bills' }, { id: 3, text: 'Invite friends over' }, { id: 4, text: 'Fix the TV' }, ] } } render() { const { items } = this.state; return ( <p> <TransitionGroup className="todo-list"> {items.map(({ id, text }) => ( <CSSTransition key={id} timeout={500} classNames="fade" > <p> <Button onClick={() => { this.setState(state => ({ items: state.items.filter( item => item.id !== id ), })); }} > × </Button> {text} </p> </CSSTransition> ))} </TransitionGroup> <Button type="button" onClick={() => { const text = prompt('Enter some text'); if (text) { this.setState(state => ({ items: [ ...state.items, { id: 1123, text }, ], })); } }} > Add Item </Button> </p> ); } }
css
.fade-enter { opacity: 0.01; } .fade-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0.01; transition: opacity 500ms ease-in; }
效果是增加和删除列表项中的一个,产生渐入渐失的效果!说白了也就是多个Transition 或者CSSTransition组合的效果。
但是也提供一些参数
1、component default 'p' 也就是TransitionGroup渲染出来的标签为p,也可以就行更改,例如component="span" 渲染出来的就是span标签了 2、children 相当于你给的组件,可以是字符串或者自定义组件等。 3、appear 写在TransitionGroup里面相当于开启或者禁止里面的Transition || CSSTransition 方便写的作用
三个组件大概的特性就是这些。剩下的全靠自己去开发了!后续会录入一些小的例子来讲解,敬请期待。。。。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
Jquery添加loading过渡遮罩
以上就是react 官网动画库(react-transition-group)的新写法的详细内容,更多请关注Gxl网其它相关文章!