Question

我正在尝试在页面完成加载时淡入图像，但它无法正常工作。这是我正在使用的代码：

import classNames from 'classnames';
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';



var ImageComponent = React.createClass({
  getInitialState: function() {
    return {
      loaded: false
    };
  },

  onImageLoad: function() {
    if (this.isMounted()) {
      this.setState({ loaded: true });
    }
  },

  componentDidMount: function() {
    var imgTag = ReactDOM.findDOMNode(this.refs.img);
    var imgSrc = imgTag.getAttribute('src');
    var img = new window.Image();
    img.onload = this.onImageLoad;
    img.src = imgSrc;
  },

  render: function() {
    var { className, ...props } = this.props;
    var imgClasses = 'image';
    var rootClassName = classNames(className, 'image', {
      'image-loaded': this.state.loaded,
    });

    return (
      <img ref="img" {...props} className={rootClassName} />
    );
  }
});

export default ImageComponent;

然后我将ImageComponent包裹起来：

 <ImageComponent  src="http://voices.nationalgeographic.com/files/2013/04/NationalGeographic_1467467.jpg"/>

我将我的CSS样式设置为：

.image { 
  opacity: 0; transition: opacity 5s;}

.image-loaded { opacity: 1; }

现在当我去检查页面时，图像继承了“图像”和“图像加载”的类名，但没有css3。图像立即加载而没有任何转换。这是我使用它的链接：http://buildwithreact.com/article/fade-in-image-recipe

Answer 1

您可以使用react-addons-css-transition-group 首先安装包：

$ npm install react-addons-css-transition-group --dev

在您的组件中导入新包：

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

然后使用您的组件添加动画as explained in the react docs

<ReactCSSTransitionGroup
  transitionName="example" transitionAppear={true}
  transitionAppearTimeout={700}>
   <ImageComponent src="http://voices.nationalgeographic.com/files/2013/04/NationalGeographic_1467467.jpg"/>
</ReactCSSTransitionGroup>

现在添加你的css：

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .7s ease-in;
}

请注意，您需要使用* -appear和* -appear-active类才能使用CSS Transition Group方法的强大功能！

React：on page load淡入淡出图片

1 个答案: