search

ssorallen / turbo-react

A JavaScript library that transitions between static HTML pages on navigation; no app server required.
https://turbo-react.herokuapp.com/
Apache License 2.0
274 stars 16 forks source link

Body CSS classes not being updated #21

Open olliekav opened 9 years ago

olliekav commented 9 years ago

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?

ssorallen commented 9 years ago

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/?

olliekav commented 9 years ago

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).

olliekav commented 9 years ago

@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 commented 9 years ago

@olliekav, is your staging site running Rails?

olliekav commented 9 years ago

@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

ssorallen commented 9 years ago

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.

olliekav commented 9 years ago

Thanks! No rush, I just couldn't work out what I was doing wrong (or if there was a bug).

olliekav commented 9 years ago

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.

olliekav commented 9 years ago

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.

ssorallen commented 9 years ago

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.

olliekav commented 9 years ago

@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.

sicks commented 9 years ago

@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.

sicks commented 9 years ago

mmmmmm console.dir(e) #23

olliekav commented 9 years ago

@sickslives Thanks I'll give that a shot.

sicks commented 9 years ago

@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.

olliekav commented 8 years ago

@sickslives Good to know, thanks. First chance I've had to go back and have a look at this!

sicks commented 8 years ago

@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