turbo-react
turbo-react copied to clipboard
ssorallen
Body CSS classes not being updated
I'm trying to animate body colours between pages but my body CSS classes are not being updated.
e.g. this code won't work
<body <%= page_classes %>>
Content
</body>
It only seems to work if I add a wrapper div inside the body as this is replaced.
<body>
<div id="wrapper" <%= page_classes %>>
Content
</div>
</body>
Is this expected behaviour, I thought it looked for differences on the body and applied these?
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/?
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).
@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.
@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
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.
Thanks! No rush, I just couldn't work out what I was doing wrong (or if there was a bug).
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.
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.
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.
@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.
@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.
@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.
@sickslives Good to know, thanks. First chance I've had to go back and have a look at this!
@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