Comments (17)
It should update the body class as well. Do you know which version of Turbolinks you're using? Is this on your website, http://olliekav.com/?
from turbo-react.
It's not currently as it would break, I'm just making some updates. Let me push it to staging env so you can have a look. I'm using the Turbolinks bundled in the zip as I've been upgrading to your latest version (I was using the gem before).
from turbo-react.
@ssorallen You can view it on http://staging.olliekav.com/ (olliekav:okdesign). All the portfolio pages should switch the body class so the background is a color.
from turbo-react.
@olliekav, is your staging site running Rails?
from turbo-react.
@ssorallen It's on Middleman(https://github.com/middleman/middleman), my repo is public if you want to see the setup https://github.com/olliekav/olliekav.com/tree/staging
from turbo-react.
Okay thanks for the links. I can't immediately see what the problem is, but I will try to figure it out in the evenings this week.
from turbo-react.
Thanks! No rush, I just couldn't work out what I was doing wrong (or if there was a bug).
from turbo-react.
This was down to the version of Turbolinks after playing around with it again, instead of the version included locally I used the gem from master...
gem "turbolinks", github: 'rails/turbolinks', branch: 'master', :require => false
And now its all working fine.
For anyone using Middleman you'll need to use :require => false
fo remove the Rails dependencies.
from turbo-react.
Maybe not quite there just yet, body class is updated but for the life of me I can't get the background-color to animate with CSS. Will investigate further.
from turbo-react.
Thanks for tracking down the Turbolinks version problem. I will try to check out the background-color transitioning problem this weekend. Sorry for the delay.
from turbo-react.
@ssorallen No worries, I had a spare 30min so thought I would have another play with it. If you go on http://staging.olliekav.com/ (olliekav:okdesign) you can see the body class updates are applied, but for some strange reason the css transition never occurs.
Best way I've found to test is this one...
http://staging.olliekav.com/work/alfred-app/
Then use the next link when you scroll to go to
http://staging.olliekav.com/work/rebellion-games/
They have body class of alfred-app
and rebellion-games
that control the colours. The CSS transition never occurs. But if I manually change that class in Web Inspector between the two the CSS transition occurs which makes me think it's not something I'm doing my end.
from turbo-react.
@olliekav toss a console.log(e.message)
in here to see if an error's being thrown somewhere. I'm not sure if it will help you locate what's causing the error itself but that's probably why it's not animating.
I ran into issues where including text containing #{this ruby string constructor}
in the contents of a markdown blog post was making turbo-react throw a parse error about an unrecognized /
. I'm going to look into it some more when I have some time and maybe submit a PR if I can get it to output a more helpful error than what I got, but hopefully for now this will help you narrow down your issue.
from turbo-react.
mmmmmm console.dir(e)
#23
from turbo-react.
@sickslives Thanks I'll give that a shot.
from turbo-react.
@olliekav I just switched to gem "turbolinks", github: 'rails/turbolinks', branch: 'master'
for the loading bar and discovered that it adds the styles for the loading bar into the body as an internal stylesheet, and includes content: ' '
, which breaks the JSX parser. Which then makes turbo-react catch that error and render the page with turbolinks instead, which is why your animations stopped working. reactjs/react-magic#35, reactjs/react-magic#36. That said, if you have any other internal stylesheets in your page, especially with quotes, they break transitions.
from turbo-react.
@sickslives Good to know, thanks. First chance I've had to go back and have a look at this!
from turbo-react.
@olliekav I'm actually not using turbo-react to achieve page transitions/animations anymore, if you don't have too many moving parts it's actually really easy to just use the events turbolinks provides to fire exit animations on page:fetch
and incoming animations on page:change
. Wrap the class changing js in a 0s setTimeout
so the animations actually fire visibly and you're good to go. I wrote a blog post that documents what I did to achieve the page transitions on my website, but the gist is basically:
$(document).on 'page:change', ()->
setTimeout ()->
$('body').addClass('somecolor')
, 0
from turbo-react.
Related Issues (20)
- Back button is busted
- Does not work in iOS Chrome
- Breaks when using inline SVGs HOT 4
- Using Turbolinks events and options HOT 3
- Expose Turbolinks as global for configuration HOT 1
- Exceptions should trigger normal pageload
- Issue with addEventListener("click") on link HOT 11
- Remove bundled Turbolinks
- Considerations for moving this beyond an experiment? HOT 11
- Replace `replaceChild` monkeypatch HOT 2
- <textarea> and <pre> content is not converted properly HOT 12
- Edge Turbolinks disables turbo-react HOT 5
- Updating form fields HOT 2
- react components don't load HOT 1
- Mutations in page not reflected in the virtual DOM HOT 4
- Turbolinks 5 HOT 3
- global is not defined error HOT 5
- Can turbo-react be used when using webpack
- Integrate HTMLtoJSX for proper JSX conversion HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbo-react.