javascript - 使用 ReactCSSTransitionGroup 在 React 中进行变量转换

Question

ReactCSSTransitionGroup使用 CSS 文件来定义和存储转换。这很好，效果很好。但是，如果一个组件需要一个可变的转换配置，例如变量 transition-duration 怎么办？取 0 毫秒到 10000 毫秒之间的任何值？当组件的 Javascript 类存储在 CSS 文件中时，如何更改 transition-duration 的值？

示例:

假设您想要制作一个幻灯片组件，并且您想要实现一个选项来更改 fading-duration(动画从一张幻灯片淡出到另一张幻灯片所花费的时间)。您可以这样调用该组件:

<Slideshow fadeDuration={1000}>

这是组件将过渡添加到将要呈现的幻灯片元素的方式:

render: function() {
  return (
    <div>
      <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}>
        {this.slide}
      </ReactCSSTransitionGroup>
    </div>
  );
}

这是 ReactCSSTransitionGroup 定义转换所需的 css 文件:

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

现在如何在组件内部使用 props.fadeDuration 来更改位于 css 文件中的 transition-duration 的值？

到目前为止，我唯一想到的是，我必须删除 ReactCSSTransitionGroup 并使用 refs 手动创建转换和 'Style Object' 'transition' property .这是要走的路吗？或者我该怎么做？

Answer 1

您可以使用 jss从 javascript 操作 css 的库。这是一个非常好的库，可以解决很多问题。看一看。

已更新

我将向您展示如何使用它。在主要情况下组件使用 jss-react看起来像:

import React, { Component } from 'react'
import useSheet from 'react-jss'

// You can use jss directly too!
import jss from 'jss'
import vendorPrefixer from 'jss-vendor-prefixer'
jss.use(vendorPrefixer())

const styles = {
  button: {
    'background-color': 'yellow'
  },
  label: {
    'font-weight': 'bold'
  }
}

class Button extends Component {
  render() {
    const { classes } = this.props.sheet

    return (
      <div className={classes.button}>
        <span className={classes.label}>
          {this.props.children}
        </span>
      </div>
    )
  }
}

export default useSheet(Button, styles)

样式在组件外定义，然后是一个higher-order component用于包装它并注入(inject)样式。在大多数情况下没问题，但由于我们需要从组件内部添加 css 规则，因此我们需要使用另一种方法。我们需要使用 jss 作为 child element instead of higher order component .这将允许我们在 addRules() 的帮助下从组件中添加规则。方法。

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import useSheet from 'react-jss'
import jss from 'jss'

let styles = {};
const sheet = jss.createStyleSheet(styles, {named: false})
class Foo extends Component {
  constructor(props) {
    super(props);
    this.state ={
      isVisible: false
    }
  }
  toggle() {
    this.setState({
      isVisible: !this.state.isVisible
    })
  }

  render() {
    const duration = 500
    const { classes } = sheet
    sheet.addRules(
      {            
        '.example-enter': {
          opacity: 0.01
        },
        '.example-enter-active': {
          color: 'red',
          opacity: 1,
          transition: 'opacity ' + duration + 'ms ease-in'
        },
        '.example-leave': {
          opacity: 1
        },
        '.example-leave-active': {
          opacity: 0.01,
          transition: 'opacity '+ duration +'ms ease-in'
        }
      }
    );
    return (
      <div className={classes.red}>
        <Jss sheet={sheet} />
        <a onClick={this.toggle.bind(this)}>Click</a>
          <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={10}
          transitionLeaveTimeout={600}>
          { this.state.isVisible ? <div>Visible</div> : null}
        </ReactCSSTransitionGroup>
      </div>
  );
  }
}


const map = new WeakMap()

class Jss extends Component {
  componentWillMount() {
    const {sheet} = this.props
    const counter = map.get(sheet) || 0
    if (!counter) sheet.attach()
    map.set(sheet, counter + 1)
  }

  componentWillUnmount() {
    const {sheet} = this.props
    const counter = map.get(sheet) - 1
    if (counter) {
      map.set(sheet, counter)
    } else {
      sheet.detach()
      map.delete(sheet)
    }
  }

  render() {
    return null
  }
}

export default Foo 

请记住一件事。默认情况下，jss为类添加一些后缀以摆脱全局选择器并将它们隔离。一个类看起来像:.example-enter-441163035 .如果我们设置 className，使用这种方法会很舒服手动属性，例如:<div className={classes.button}> .所以，或者您必须手动设置过渡类，如下所示:

<ReactCSSTransitionGroup
  transitionName={{
    enter: classes.example-enter,
    enterActive: classes.example-enter-active,
    leave: classes.example-leave,
    leaveActive: classes.example-leave-active.
  }}
  transitionEnterTimeout={10}
  transitionLeaveTimeout={600}>

或者您必须通过设置 named 来使用全局选择器选项为 false启动工作表时(就像我在示例中所做的那样):

const sheet = jss.createStyleSheet(styles, {named: false})

希望对您有所帮助!不过，看看这个图书馆。它真的很酷，并且推广了一种非常有趣的 CSS 方法。