React Transition HELP!

I have been banging my head against my keyboard for a week trying to figure out these stupid transitions.

I have looked everywhere and the only solutions I can find are for CSSTransition or TransitionGroup and are almost exclusively aimed towards mounting and unmounting hamburger menus.

I was trying to transition from one quote to another quote more smoothly. That didn’t work so now I have taken a step back and tried to just implement the example in the React Docs http://reactcommunity.org/react-transition-group/transition , and even that doesn’t do anything.

I think it has something to do with the in: inProp, but I have no idea where ‘in’ is coming from.

PLEASE HELP!!

import React from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
  
  );


class QuoteText extends React.Component {
	
	render(){
		
		return(
			<div className = 'textCont'>
				<Fade/>
				<h2 id = "text">{this.props.state.quoteText}</h2>
				<p id = 'author'>-{this.props.state.author}</p>
			</div>
		);
	}
	
};

export default QuoteText;

This snippet renders a place where the component should be, but nothing happens. When I look at it in React Dev Tools it has an ‘in’ prop, but it always says false.

If it’s any consolation, I messed around a bit and couldn’t get it to work either. A few commenters said to use CSSTransitions instead, but I couldn’t get that to work either.

Doing a search on github, it was in the description of 193 repos - I might look through those.

1 Like

Thanks Kevin for at least taking a look.

I’ve gotten a transition to kind of do what I want, but for some reason it renders the new information and then applies the exiting transition.

Any idea why that might be?

render(){	
		let inProp = this.state.yesNo;
	return (
		<div className = "wrapper" style = {this.state.style}>
			<div id = "quote-box">
				<div className = 'textCont'>
					<h1>Random Quote Machine</h1>
					<SwitchTransition>
					<Transition key = {inProp} timeout={duration} unmountOnExit = {true}>
					{state => (
					<div style={{
						...defaultStyle,
						...transitionStyles[state]
					}}>
						<QuoteText data = {this.state}/>
					</div>
					)}
				</Transition>
				</SwitchTransition>
				</div>
				<div className = 'buttonTweetCont'>
					<a id = "tweet-quote" href={'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text='+ encodeURIComponent('"' + this.state.quoteText + '"\r\n- ' + this.state.author)}>
					<i className="fab fa-twitter"></i>
					</a>
					<NewQuoteButton state = {this.state} addNewQuote = {this.addNewQuote}/>
				</div>
			</div>
		</div>
			
	)}

If I add the property exit = {false} it kind of works, but it won’t transition out of the original rendering.

Also, I get thrown this warning, and I have no idea what it means.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (at App.js:82)
in Transition (at App.js:80)

Damn, and now after (I ran npm build and) tried to upload the project to my site, it doesn’t work unless I use dev tools.

randomquote.collinicoding.com

I’m super confused.