资讯专栏INFORMATION COLUMN

react 官网动画库(react-transition-group)的新写法

ky0ncheng / 1155人阅读

摘要:一一个官网提供的动画过度库。安装而官方提供的三个组建。下面来看一个例子效果是增加和删除列表项中的一个,产生渐入渐失的效果说白了也就是多个或者组合的效果。

一、react-transition-group 一个官网提供的动画过度库。

搜索了网上关于react动画的,很多的答案都是很久以前的了老版本了,而现在官方提供的是叫react-transition-group 它是以前两个的合体版本,所以写下这个记录一下,同时也给一些需要的猿门给一些小的提示。
1、安装

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

而官方提供的三个组建Transition,CSSTransition,TransitonGroup

Transition

过渡组件(Transiton)允许您用一个简单的声明性API描述随着时间的推移从一个组件状态到另一个组件状态的转换。最常用的是用来动画一个组件的安装和卸载,但也可以用来描述在适当的过渡状态。默认情况下,该组件不会更改其呈现的组件的行为,它只跟踪组件的“进入”和“退出”的状态。由你来为这些状态定义效果。(翻译)
实际的情况就是你如果只写这个组件是没有任何的效果的,就和你写一个div一样。所以你需要给他们赋予一些参数才可以。例如下面这个例子

//自己简单的封装了一个,该有的参数都由了,可以自行粘贴在自己的代码里面去试试。
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 例如
    return (
      
        {
          state => {
            console.log(state, "###") //你可以很直观的看到组件加载和卸载时候的状态
            return(
              
{this.props.children}
) } }
); } }

其中上面的状态有四种:

entering
entered
exiting
exited

组件的初始化状态都停留在exited
上面就是写的一个最基本的例子,下面是如何的调用

let num = 1;
class Dnd extends React.Component {
  state = {
    ins: true,
    current: 1,
    dom: 
ceshi weizhi {num}
} handle = (bool) => { this.setState({ test: !bool }) } end = () => { const that = this; num = num + 1; setTimeout(function () { that.setState({ test: true, dom:
888888 {num}
}) }, 500) } render () { const { location } = this.props const { test } = this.state; return ( {this.state.dom} ) } } // 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。
这个组件大概就是这样的,这样适合写一个tab类型的页面,在切换的时候可以展示不同的dom
CSSTransition

此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同,参数为:classNames
参数:(主要)in, timeout, unmountOnExit, classNames, 用法同Transition。看如下例子:

state  = {
    star: false
}




  

效果是点击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.

TransitionGroup

一看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 (
      
{items.map(({ id, text }) => (
{text}
))}
); } }

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 "div" 也就是TransitionGroup渲染出来的标签为div,也可以就行更改,例如component="span" 渲染出来的就是span标签了
2、children 相当于你给的组件,可以是字符串或者自定义组件等。
3、appear  写在TransitionGroup里面相当于开启或者禁止里面的Transition || CSSTransition 方便写的作用

三个组件大概的特性就是这些。剩下的全靠自己去开发了!后续会录入一些小的例子来讲解,敬请期待。。。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95925.html

相关文章

  • react-transition-group动画库Transition组件使用

    摘要:动画库这个库包括个组件,今天做项目刚好用到了组件,记录一下使用过程中的总结,另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库 这个库包括3个组件:Transition,CSSTransition,TransitonGroup,今天做项目刚好用到了Transitio...

    charles_paul 评论0 收藏0
  • react-transition-group动画库Transition组件使用

    摘要:动画库这个库包括个组件,今天做项目刚好用到了组件,记录一下使用过程中的总结,另外两个组件用到了再做介绍。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。参考网址官方案例官网动画库的新写法 react-transition-group动画库 这个库包括3个组件:Transition,CSSTransition,TransitonGroup,今天做项目刚好用到了Transitio...

    gityuan 评论0 收藏0
  • React动画实现原理

    摘要:动画的实现原理要实现动画,究其根本,最终的落地依然是操作从而达到页面呈现动画的目的。 声明: 当前为草稿阶段。然后有人可以指引下怎么写草稿文章么~ web动画的实现原理 web动画的实现,最终都是需要操作dom。CSS动画,是给相应的dom元素添加动画className ; JS动画,则是通过定时器或其他手段,不断更改dom元素属性值,达到动画的目的。 React动画的实现原理 Re...

    mrli2016 评论0 收藏0
  • React应用“动”起来

    摘要:因为其组件只是根据提供的及属性,生成动画的数据,业务应用中拿到生成的数据后根据需要添加需要动画的组件样式。除了上述简单的动画应用,在复杂动画的实现方面,表现非常优越。 WEB应用中动画很重要 不管是web应用还是原生应用,也不论是PC端应用还是移动端应用,动画都扮演了一个重要的角色。 尽管动画并不会添加应用的实际动能,但一个好的动画,一个流畅且优雅,选择在恰当时机出现的动画,能为应用增...

    xiyang 评论0 收藏0
  • react进阶漫谈

    摘要:父组件向子组件之间非常常见,通过机制传递即可。我们应该听说过高阶函数,这种函数接受函数作为输入,或者是输出一个函数,比如以及等函数。在传递数据的时候,我们可以用进一步提高性能。 本文主要谈自己在react学习的过程中总结出来的一些经验和资源,内容逻辑参考了深入react技术栈一书以及网上的诸多资源,但也并非完全照抄,代码基本都是自己实践,主要为平时个人学习做一个总结和参考。 本文的关键...

    neuSnail 评论0 收藏0

发表评论

0条评论

ky0ncheng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<