SPageTransitionFeature
This feature allows you to add page transition to your size by using ajax requests and configurable
transition effects.
When inited, it will proxy all the internal links (not the _blank or links starting with http...) and make the ajax
transition between pages.
It also listen on the document
for the location.href
event and transition to the specified detail
property of the event.
Preview
Simple example
On your body tag, put the s-page-transition attribute
This website is a perfect example of this feature behavior...
This link will reload this same page using a page transition...On your body tag, put the s-page-transition attribute
This website is a perfect example of this feature behavior...
This link will reload this same page using a page transition...Loading code example. Please wait...
Update only a part of the page
To update only a part of the UI, simply add the s-page-transition-container="something" on the part you want to be updated
If this same container exists in the loaded page, only this part will be updated.
This website is a perfect example of this feature behavior...
This link will reload this same page using a page transition...To update only a part of the UI, simply add the s-page-transition-container="something" on the part you want to be updated
If this same container exists in the loaded page, only this part will be updated.
This website is a perfect example of this feature behavior...
This link will reload this same page using a page transition...Loading code example. Please wait...
Import
Install
Events
-
s-page-transition.start
Dispatched when a transition starts
-
s-page-transition.end
Dispatch when a transition ends
-
s-page-transition.error
Dispatch when an error occurs
Interface
-
patchBodytrueBoolean
Specify if you want to patch the body tag with the new page body tag
-
scrollfalseBoolean
Specify if you want this feature to handle scroll to top after loading, etc...
-
beforeFunction
Specify a function to run before the transition
-
afterFunction
Specify a function to run after the transition
-
autoStyletrueBoolean
Specify if you want to automatically add classes like "s-tc:error" on the broken links (only the "a" tags)
-
injectBrokenLinkIcontrueBoolean
Specify if you want to inject the "error" icon on the broken links
-
brokenLinkIcon<i class="s-icon:link-broken-solid" alt="Broken link"></i>String
Specify the icon you want to inject on the broken links
-
gatrueBoolean|String
Specify if you want to track pages change using google analytics of not. If true, will use the config.google.ga configuration as target, otherwise you can specify the gtag universal id here...