IT教程 ·

基于 React 完成一个 Transition 过渡动画组件

272 0 0

Nginx之常用基本配置（一）

过渡动画使 UI 更富有表现力而且易于运用。怎样运用 React 疾速的完成一个 Transition 过渡动画组件？

基本完成

完成一个基本的 CSS 过渡动画组件，经由过程切换 CSS 款式完成简朴的动画结果，也就是经由过程增加或移除某个 class 款式。因而须要给 Transition 组件增加一个 toggleClass 属性，标识要切换的 class 款式，再增加一个 action 属性完成款式切换，action 为 true 时增加 toggleClass 到动画元素上，action 为 false 时移除 toggleClass。

装置 classnames 插件：

npm install classnames --save-dev

是一个简朴的JavaScript实用程序，用于有条件地将 className 衔接在一起。

在 components 目录下新建一个 Transition 文件夹，并在该文件夹下新建一个 Transition.jsx 文件：

import React from 'react'
import classnames from 'classnames'

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {
  render() {
    const { children } = this.props
    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true
            })
          }
        >
          { children }
        </div>
      </div>
    )
    return transition
  }
}

export default Transition

这里运用了 ，在 JSX 中，运用 camelCase（小驼峰定名）来定义属性的称号，运用大括号“{}”嵌入任何有用的 。
如：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

等价于：

const element = <h1>Hello, Josh Perez</h1>;

注重：
因为 JSX 语法上更靠近 JavaScript 而不是 HTML，所以 React DOM 运用 camelCase（小驼峰定名）来定义属性的称号，而不运用 HTML 属性称号的定名商定。
比方，JSX 里的 class 变成了 className，而 tabindex 则变成 tabIndex。

别的，在 React 中，
包含组件一切的子节点，即组件的入手下手标签和完毕标签之间的内容（与 Vue 中 slot 插槽类似）。比方：

<Button>默许按钮</Button>

在 Button 组件中猎取 props.children，就能够获得字符串“默许按钮”。

接下来，在 Transition 文件夹下新建一个 index.js，导出 Transition 组件：

import Transition from './Transition.jsx'

export { Transition }

export default Transition

然后，在 Transition.jsx 文件中为组件增加 props 搜检并设置 action 的默许值：

import PropTypes from 'prop-types'

const propTypes = {
  /** 实行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class称号 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}

这里运用了 完成运行时范例搜检。

注重：
prop-types 是一个运行时范例搜检东西，也是 脚手架默许设置的运行时范例搜检东西，运用时直接引入即可，无需装置。

完全的 Transition 组件代码以下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 实行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class称号 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      children
    } = this.props
    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass
            })
          }
        >
          { children }
        </div>
      </div>
    )
    return transition
  }
}

export default Transition

如今，能够运用我们的 Transition 组件了。

CSS 代码以下：

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

JS 代码以下：

import React from 'react';
import Transition from './Transition';

class Anime extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      action: true
    }
  }
  
  render () {
    const btnText = this.state.action ? '淡出' : '淡入'
    return (
      <div>
        <Transition
          className="fade"
          toggleClass="show"
          action={ this.state.action }
        >
          淡入淡出
        </Transition>
        <button
          style={{ marginTop: '20px' }}
          onClick={() => this.setState({ action: !this.state.action })}
        >
          { btnText }
        </button>
      </div>
    )
  }
}

然后，在你须要该动画的处所运用 Anime 组件即可。

完成 Animate.css 兼容

是一款壮大的预设 CSS3 动画库。接下来，完成在 Transition 组件中运用 Animate.css 完成壮大的 CSS3 动画。

因为 Animate.css 动画在进入动画和脱离动画一般运用两个结果相反的 class 款式，因而，须要给 Transition 组件增加 enterClass 和 leaveClass 两个属性，完成动画切换。

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 实行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class称号 */
  toggleClass: PropTypes.string,
  /** 进入动画的class称号，存在 toggleClass 时无效 */
  enterClass: PropTypes.string,
  /** 脱离动画的class称号，存在 toggleClass 时无效 */
  leaveClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      children
    } = this.props
    return (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
        >
          { children }
        </div>
      </div>
    )
  }
}

export default Transition

注重：
因为 toggleClass 实用于那些进入动画与脱离动画切换雷同 class 款式的状况，而 enterClass 和 leaveClass 实用于那些进入动画与脱离动画切换差别的 class 款式的状况，所以，他们与 toggleClass 不能共存。

接下来，就能够试一试到场 Animate.css 后的 Transition 组件：

import React from 'react';
import 'animate.css';

class Anime extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      action: true
    }
  }
  
  render () {
    return (
      <div>
        <Transition
          className="animated"
          enterClass="bounceInLeft"
          leaveClass="bounceOutLeft"
          action={ this.state.action }
        >
          弹入弹出
        </Transition>
        <utton
          style={{ marginTop: '20px' }}
          onClick={() => this.setState({ action: !this.state.action })}
        >
          { this.state.action ? '弹出' : '弹入' }
        </utton>
      </div>
    )
  }
}

功用扩大

经由过程上面的完成，Transition 组件能实用大部分场景，然则功用不够雄厚。因而，接下来就须要扩大 Transition 的接口。动画一般能够设置耽误时候，播放时长，播放次数等属性。因而，须要给 Transition 增加这些属性，来雄厚设置动画。

增加以下 props 属性，并设置默许值：

const propTypes = {
  ...,
  /** 动画耽误实行时候 */
  delay: PropTypes.string,
  /** 动画实行时候长度 */
  duration: PropTypes.string,
  /** 动画实行次数，只在实行 CSS3 动画时有用 */
  count: PropTypes.number,
  /** 动画缓动函数 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是不是强迫轮番反向播放动画，count 为 1 时无效 */
  reverse: PropTypes.bool
}

const defaultProps = {
  count: 1,
  reverse: false
}

依据 props 设置款式：

// 动画款式
const styleText = (() => {
  let style = {}
  // 设置耽误时长
  if (delay) {
    style.transitionDelay = delay
    style.animationDelay = delay
  }
  // 设置播放时长
  if (duration) {
    style.transitionDuration = duration
    style.animationDuration = duration
  }
  // 设置播放次数
  if (count) {
    style.animationIterationCount = count
  }
  // 设置缓动函数
  if (easing) {
    style.transitionTimingFunction = easing
    style.animationTimingFunction = easing
  }
  // 设置动画方向
  if (reverse) {
    style.animationDirection = 'alternate'
  }
  return style
})()

完全代码以下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 实行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class称号 */
  toggleClass: PropTypes.string,
  /** 进入动画的class称号，存在 toggleClass 时无效 */
  enterClass: PropTypes.string,
  /** 脱离动画的class称号，存在 toggleClass 时无效 */
  leaveClass: PropTypes.string,
  /** 动画耽误实行时候 */
  delay: PropTypes.string,
  /** 动画实行时候长度 */
  duration: PropTypes.string,
  /** 动画实行次数，只在实行 CSS3 动画时有用 */
  count: PropTypes.number,
  /** 动画缓动函数 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是不是强迫轮番反向播放动画，count 为 1 时无效 */
  reverse: PropTypes.bool
}

const defaultProps = {
  action: false,
  count: 1,
  reverse: false
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      delay,
      duration,
      count,
      easing,
      reverse,
      children
    } = this.props

    // 动画款式
    const styleText = (() => {
      let style = {}
      // 设置耽误时长
      if (delay) {
        style.transitionDelay = delay
        style.animationDelay = delay
      }
      // 设置播放时长
      if (duration) {
        style.transitionDuration = duration
        style.animationDuration = duration
      }
      // 设置播放次数
      if (count) {
        style.animationIterationCount = count
      }
      // 设置缓动函数
      if (easing) {
        style.transitionTimingFunction = easing
        style.animationTimingFunction = easing
      }
      // 设置动画方向
      if (reverse) {
        style.animationDirection = 'alternate'
      }
      return style
    })()

    return (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
          style={ styleText }
        >
          { children }
        </div>
      </div>
    )
  }
}

export default Transition

这里为 Transition 增加了以下设置属性：

  • delay：划定在动画入手下手之前的耽误。
  • duration：划定完成动画所消费的时候，以秒或毫秒计。
  • count：划定动画应当播放的次数。
  • easing：划定动画的速率曲线。
  • reverse：划定是不是应当轮番反向播放动画。

现在，Transition 的功用已相称雄厚，能够很邃密的掌握 CSS3 动画。

优化

这一步，我们须要针对 Transition 组件进一步优化，重要包含动画完毕的监听、卸载组件以及兼容。

增加以下 props 属性，并设置默许值：

const propTypes = {
  ...,
  /** 动画完毕的回调 */
  onEnd: PropTypes.func,
  /** 脱离动画完毕时卸载元素 */
  exist: PropTypes.bool
}

const defaultProps = {
  ...,
  reverse: false,
  exist: false
}

处置惩罚动画完毕的监听事宜：

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  ...

  onEnd = e => {
    const { onEnd, action, exist } = this.props
    if (onEnd) {
      onEnd(e)
    }
    // 卸载 DOM 元素
    if (!action && exist) {
      const node = e.target.parentNode
      node.parentNode.removeChild(node)
    }
  }

  /**
   * 对动画完毕事宜 onEnd 回调的处置惩罚函数
   *
   * @param {string} type - 事宜解绑定范例: add - 绑定事宜，remove - 移除事宜绑定
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['animationend', 'transitionend']
    events.forEach(ev => {
      el[`${type}EventListener`](ev, this.onEnd, false)
    })
  }

  componentDidMount () {
    this.handleEndListener()
  }

  componentWillUnmount () {
    const { action, exist } = this.props
    if (!action && exist) {
      this.handleEndListener('remove')
    }
  }

  render () {
    ...
  }
}

这里运用到两个生命周期函数 componentDidMount 和 componentWillUnmount，关于 React 生命周期的引见请移步。

供应了可在 React 运用中运用的 DOM 要领。

猎取兼容性的 animationend 事宜和 transitionend 事宜。差别的浏览器请求运用差别的前缀，因为火狐和IE都已支撑了这两个事宜，因而，只需针对 webkit 内核浏览器举行兼容的 webkitTransitionEnd 事宜检测。检测函数代码以下：

/**
 * 浏览器兼容事宜检测函数
 *
 * @param {node} el - 触发事宜的 DOM 元素
 * @param {array} events - 大概的事宜范例
 * @returns {*}
 */
const whichEvent = (el, events) => {
  const len = events.length
  for (var i = 0; i < len; i++) {
    if (el.style[i]) {
      return events[i];
    }
  }
}

修正 handleEndListener 函数：

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  ...

  /**
   * 对动画完毕事宜 onEnd 回调的处置惩罚函数
   *
   * @param {string} type - 事宜解绑定范例: add - 绑定事宜，remove - 移除事宜绑定
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['AnimationEnd', 'TransitionEnd']
    events.forEach(ev => {
      const eventType = whichEvent(el, [ev.toLowerCase(), `webkit${ev}`])
      el[`${type}EventListener`](eventType, this.onEnd, false)
    })
  }

  ...

}

到这里，我们完成了全部 Transition 组件的开发，完全代码以下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import ReactDOM from 'react-dom'

const propTypes = {
  /** 实行动画 */
  action: PropTypes.bool,
  /** 切换的css动画的class称号 */
  toggleClass: PropTypes.string,
  /** 进入动画的class称号，存在 toggleClass 时无效 */
  enterClass: PropTypes.string,
  /** 脱离动画的class称号，存在 toggleClass 时无效 */
  leaveClass: PropTypes.string,
  /** 动画耽误实行时候 */
  delay: PropTypes.string,
  /** 动画实行时候长度 */
  duration: PropTypes.string,
  /** 动画实行次数，只在实行 CSS3 动画时有用 */
  count: PropTypes.number,
  /** 动画缓动函数 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是不是强迫轮番反向播放动画，count 为 1 时无效 */
  reverse: PropTypes.bool,
  /** 动画完毕的回调 */
  onEnd: PropTypes.func,
  /** 脱离动画完毕时卸载元素 */
  exist: PropTypes.bool
}

const defaultProps = {
  action: false,
  count: 1,
  reverse: false,
  exist: false
}

/**
 * 浏览器兼容事宜检测函数
 *
 * @param {node} el - 触发事宜的 DOM 元素
 * @param {array} events - 大概的事宜范例
 * @returns {*}
 */
const whichEvent = (el, events) => {
  const len = events.length
  for (var i = 0; i < len; i++) {
    if (el.style[i]) {
      return events[i];
    }
  }
}

/**
 * css过渡动画组件
 *
 * @visibleName Transition 过渡动画
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  onEnd = e => {
    const { onEnd, action, exist } = this.props
    if (onEnd) {
      onEnd(e)
    }
    // 卸载 DOM 元素
    if (!action && exist) {
      const node = e.target.parentNode
      node.parentNode.removeChild(node)
    }
  }

  /**
   * 对动画完毕事宜 onEnd 回调的处置惩罚函数
   *
   * @param {string} type - 事宜解绑定范例: add - 绑定事宜，remove - 移除事宜绑定
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['AnimationEnd', 'TransitionEnd']
    events.forEach(ev => {
      const eventType = whichEvent(el, [ev.toLowerCase(), `webkit${ev}`])
      el[`${type}EventListener`](eventType, this.onEnd, false)
    })
  }

  componentDidMount () {
    this.handleEndListener()
  }

  componentWillUnmount() {
    const { action, exist } = this.props
    if (!action && exist) {
      this.handleEndListener('remove')
    }
  }

  render () {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      delay,
      duration,
      count,
      easing,
      reverse,
      children
    } = this.props

    // 动画款式
    const styleText = (() => {
      let style = {}
      // 设置耽误时长
      if (delay) {
        style.transitionDelay = delay
        style.animationDelay = delay
      }
      // 设置播放时长
      if (duration) {
        style.transitionDuration = duration
        style.animationDuration = duration
      }
      // 设置播放次数
      if (count) {
        style.animationIterationCount = count
      }
      // 设置缓动函数
      if (easing) {
        style.transitionTimingFunction = easing
        style.animationTimingFunction = easing
      }
      // 设置动画方向
      if (reverse) {
        style.animationDirection = 'alternate'
      }
      return style
    })()

    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
          style={ styleText }
        >
          { children }
        </div>
      </div>
    )

    return transition
  }
}

export default Transition

 

只有努力了，你才能成为想要的样子

声明：

1：本站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

2：本站提供的活动资源均来自互联网整理编辑，此类文章仅提供分享交流，不为其版权负责。如果您发现网站上有侵犯您（或贵司）的知识产权的作品，请来信: admin#ziyuanbo.com(#代表@)告知，本站将及时修改或删除。

3：本站所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性。本网站一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。

收藏点赞 打赏 生成封面
基于 React 完成一个 Transition 过渡动画组件 bigger封面
  • 0 个人已赞
上一篇

下一篇

相关文章

参与评论