misterfresh / react-easy-transition Goto Github PK

View Code? Open in Web Editor NEW

143.0 143.0 20.0 3.74 MB

Easy transitions with react and react-router

License: MIT License

JavaScript 100.00%

react-easy-transition's People

Contributors

Stargazers

Watchers

Forkers

rmoorman arufian ljknight hyperionai amurph491 garmjs navrin benct gemparkaroban reelhouse sgfswen crecket notgiorgi elstob ibnmasud hipo tlouth19 libin1991 iq-scm

react-easy-transition's Issues

Question - looking for simple page transition

Hello, I was just wondering if this is React Router v4 compatible?
It seems to me that the demo is using v3 or v2.

Thanks!

Problem with the package's dependencies

Hi,

I was having a problem with the package after cloning my project and running npm install.

When I ran my project, I was getting the following error on the console:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

After some research and a find . | grep react inside my node_modules folder, I found out the package had another version of React inside its own node_modules folder and it was loading this different version of React on the client, thus leading to the error above.

Apparently, setting the dependency from ^0.14.0 || 15.0 to ^0.14.0 || ^15.0 solved the problem for me, but I think a more thorough checking of the compatibility with the latest version would be the proper solution.

Server rendered views 'flash'

If react is rendered on the server, the page is displayed, then flashes as the initial style is set to 0 opacity, then animated back in.

Is there any way to negate this?

Not Working in IE11

Looks like the babel object-assign transform is not being applied. This PR seems to address the issue: #8. Would love to use this component for an upcoming release :D

Doesn't work with flexbox - renders component 2x.

I'm trying to use this with flexbox. My html structure is as follows:

css

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

#app {
  display: block;
}

html

<body class="Site">
    <div class="Site-content">
        <div id="app">
             ... app rendered here ...
        </div>
    </div>
</body>

With the above css, a click on links does not transition correctly on the first click, and on the second click it renders a duplicate of the component.

how to do slide in/ out?

It would be nice if there were examples to do slide in/out as with react-router-transition.

Problem with package.json "engines" value, when using yarn

Hi,

I have a problem with installing this package using yarn instead of npm.
It says:

error [email protected]: The engine "node" is incompatible with this module. Expected version "7.2.1".
error Found incompatible module

As I understood it's because of the value of engines.node, which in you case is strictly set to 7.2.1. Could you change it to something like 4.x || 5.x || 6.x || 7.x (it's example from react's package.json)?

Thanks!

Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined

Not Rendering 2 components at one time

Firstly lib renders leave animation of one component, then renders initial style of other component