Overview
Matestack's transition component enables switching between pages without a website reload. It works similar to links, but instead of reloading the complete website, including the layout like Rails usually does, it only asynchronously reloads the page without the app and replaces it dynamically.
The transition component is therefore one of the key components for you to use. You should use them instead of a link if the target path of that link belongs to the same app. Given a shopping application with a shop app, links to our root, products index or details page should be transitions, because they belong to the shop app. The use of transitions enables the app to switch between pages without website reloads, instead asynchronously requesting the new page in the background and switching it after a successful response from the server.
Using the transition component is pretty straight forward. Let's take the above mentioned shop app as an example and implement it and add a navigation with transitions to the home or products page. transitions are ofcourse usable in apps, pages and components.
1
class Shop::App < Matestack::Ui::App
2
3
def response
4
nav do
5
transition 'Matestack Shop', path: root_path
6
transition 'Products', path: products_path
7
end
8
yield
9
end
10
11
end
Copied!
Let's add the products page which simply lists all products and adds a transition to their show page for each one.
1
class Shop::Pages::Products::Index < Matestack::Ui::Page
2
3
def response
4
Products.all.each do |product|
5
div do
6
paragraph product.name
7
transition 'Details', path: product_path(product)
8
end
9
end
10
end
11
12
end
Copied!
An app defines a layout within its response method and uses the yield_page method to yield the content of a page in its layout.

Transitions between pages without page reload

app/matestack/example_app/app.rb
1
class ExampleApp::App < Matestack::Ui::App
2
3
def response
4
h1 "My Example App Layout"
5
nav do
6
transition path: app_specs_page1_path do
7
button "Page 1"
8
end
9
transition path: app_specs_page2_path do
10
button "Page 2"
11
end
12
end
13
main do
14
yield
15
end
16
end
17
18
end
Copied!
The transition components will trigger async HTTP requests and exchange the page content without a page reload.

Transitions between pages with loading element

app/matestack/example_app/app.rb
1
class ExampleApp::App < Matestack::Ui::App
2
3
def response
4
#...
5
main do
6
yield
7
end
8
#...
9
end
10
11
def my_loading_state_slot
12
span class: "some-loading-spinner" do
13
plain "loading..."
14
end
15
end
16
17
end
Copied!
which will render:
1
<main>
2
<div class="matestack-page-container">
3
<div class="loading-state-element-wrapper">
4
<span class="some-loading-spinner">
5
loading...
6
</span>
7
</div>
8
<div class="matestack-page-wrapper">
9
<div><!--this div is necessary for conditonal switch to async template via v-if -->
10
<div class="matestack-page-root">
11
your page markup
12
</div>
13
</div>
14
</div>
15
</div>
16
</end>
Copied!
and during async page request triggered via transition:
1
<main>
2
<div class="matestack-page-container loading">
3
<div class="loading-state-element-wrapper loading">
4
<span class="some-loading-spinner">
5
loading...
6
</span>
7
</div>
8
<div class="matestack-page-wrapper loading">
9
<div><!--this div is necessary for conditonal switch to async template via v-if -->
10
<div class="matestack-page-root">
11
your page markup
12
</div>
13
</div>
14
</div>
15
</div>
16
</end>
Copied!
You can use the loading class and your loading state element to implement CSS based loading state effects. It may look like this (scss):
1
.matestack-page-container{
2
3
.matestack-page-wrapper {
4
opacity: 1;
5
transition: opacity 0.2s ease-in-out;
6
7
&.loading {
8
opacity: 0;
9
}
10
}
11
12
.loading-state-element-wrapper{
13
opacity: 0;
14
transition: opacity 0.3s ease-in-out;
15
16
&.loading {
17
opacity: 1;
18
}
19
}
20
21
}
Copied!

Styling active transitions and it's parents

Styling a transition which is active is simple, because it automatically gets the active class on the clientside when the current path equals it's target path. When a sub page of a parent transition component is currently active, the parent transition component gets a active-child class.
Last modified 7mo ago