Tabs animation with Turbo

1

Is there a way to use transition effects between Turbo frames? I realized that the standard transition when a new style value is applied doesn’t work because Turbo loads a completely new page so the “new style value” or the “active” properties are immediately loaded.

I made this navigation in rails

<ul class="tab-container">
    <li class="<%= 'active' if active == 'general'  %>">
        <%= link_to 'General', edit_user_path(@user), data: { turbo: true } %>
    </li>
    <li class="<%= 'active' if active == 'previews' %>">
        <%= link_to previews_user_path(@user), data:{turbo: true} do %>
            <span class="xs-hide">Feature</span> Previews
        <% end %>
    </li>
    <li class="<%= 'active' if active == 'security' %>">
        <%= link_to 'Security', security_user_path(@user), data: { turbo: true } %>
    </li>
</ul>

And that gave me this

I was trying to make the red ease in after clicking on it and potentially make the pseudo-element bottom border slide
over (javascript?).

2

Can’t you do this with CSS transitions?

3

No, I doesn’t seem to work because my tab bar is inside the turbo frame so clicking one of the tabs reloads the whole tab bar so there’s no “transition” to transition to. It’s instant I believe

4

What I have done to make this sort of thing happen is have a class that I apply only if the render is a turbo stream or frame, and that class has the animation baked into it to run once. I have done the classic Yellow Fade Technique in this way.

@keyframes yellowfade {


from {
  background: #ff9;
}
to {
  background: transparent;
}

}

.highlight {
animation: yellowfade 2s;
}



<%= render 'your_partial', class: 'highlight' if turbo? %>

You’ll have to come up with your own version of the turbo? method, that’s not baked in anywhere.

This method lets you decide on the controller whether to add the animation, since you don’t want it to run the first time the page loads.

Walter

5

Thanks walterdavis, I’ll try it and see how it goes