CODEWITHSUNDEEP
cssreactjs
intangibles
intangibles

Reputation: 153

React: Fade not working

I'm using this code from here: http://buildwithreact.com/article/fade-in-image-recipe

currently have it as my component:

<ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />

Now when I go to google chrome and inspect the element, it has the class names of image and image-loaded but when take a look at the css, there is no css even though I added it to my style sheet. Does anyone know how to fix this?

.image { opacity: 0;   transition: opacity 500ms ease-in; }
.imageloaded { opacity: 1; }

Here is the css I imported(code above)

 import React, { Component } from 'react';
import ImageComponent from './image.component.jsx';
import styles from './css/Header.css';


    export default class Home extends Component {


     constructor() {
        super();
        this.state = {
          lightboxIsOpen: false,
          currentImage: 0,
        }

        this.closeLightbox = this.closeLightbox.bind(this);
        this.gotoNext = this.gotoNext.bind(this);
        this.gotoPrevious = this.gotoPrevious.bind(this);

      }

      return(
        <div>

    <Grid>
        <div>
                    <ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />

    </div>
    </Grid>
    </div>


        )
    }

Here is the component for ImageComponent

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



const 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', {
      'imageloaded': this.state.loaded,
    });

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

export default ImageComponent;

Upvotes: 0

Views: 511

Answers (1)

mhdnp1234
mhdnp1234

Reputation: 178

Try passing image url as props to imagecomponent and directly attach it to img element.

Upvotes: 1

Related Questions