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.