Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Body CSS classes not being updated #21

Open
olliekav opened this issue Jul 8, 2015 · 17 comments
Open

Body CSS classes not being updated #21

olliekav opened this issue Jul 8, 2015 · 17 comments

Comments

@olliekav
Copy link

olliekav commented Jul 8, 2015

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
Copy link
Owner

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
Copy link
Author

olliekav commented Jul 8, 2015

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
Copy link
Author

olliekav commented Jul 8, 2015

@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
Copy link
Owner

@olliekav, is your staging site running Rails?

@olliekav
Copy link
Author

@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
Copy link
Owner

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
Copy link
Author

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

@olliekav
Copy link
Author

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 olliekav reopened this Sep 11, 2015
@olliekav
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

@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
Copy link

sicks commented Sep 11, 2015

@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
Copy link

sicks commented Sep 11, 2015

mmmmmm console.dir(e) #23

@olliekav
Copy link
Author

@sickslives Thanks I'll give that a shot.

@sicks
Copy link

sicks commented Sep 26, 2015

@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
Copy link
Author

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

@sicks
Copy link

sicks commented Feb 14, 2016

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@olliekav @ssorallen @sicks