Comments (17)
Hi @destefanis !
Are you sure that Barba.HistoryManager.currentStatus()
returns undefined
, or it's just the .namespace
value?
In the second case, it's normal.
When .getTransition
is called, the next page is not loaded yet, that means that we don't know the data-namespace
yet on the next container.
Usually I use different solutions:
1. by URL
You can make a check on Barba.HistoryManager.currentStatus().url
to choose what Transition to use.
cons: could be tricky to keep track of the URL for a multilanguage / CMS driven site
2. by namespace
You can make a generic Transition, that waits newContainerLoading
to be resolved, at that point .namespace
will be populated and you can continue the transition accordingly.
cons: You need to wait the loading of the next page before starting the transition
3. by latest clicked element
You may want to save the latest clicked element
let lastClickEl;
Barba.Dispatcher.on('linkClicked', (el) => {
lastClickEl = el;
});
then, in .getTransition
, decide the transition based on this.
How I structure my transitions:
I use commonJS modules for all my project, and I have all my transition in separate files.
To each transition I implement a valid()
method, that could return true
or false
, based if that transition has the right or not to be executed.
A typical valid
function may look like this:
valid() {
const prev = Barba.HistoryManager.prevStatus();
return prev.namespace === 'page-blabla' && (window.innerWidth > 800);
}
and in my .getTransition I do something like:
getTransition() {
if (FromHomeSlider.valid()) {
return FromHomeSlider;
}
if (PortfolioToCaseStudy.valid()) {
return PortfolioToCaseStudy;
}
if (CaseStudyReadMore.valid()) {
return CaseStudyReadMore;
}
if (CaseStudySibling.valid()) {
return CaseStudySibling;
}
return FadeTransition;
}
This structure helps me to be very flexible, and to use that three different technique to choose if that particular transition needs to run or not.
Hope this reply fits your needs.
Cheers!
from barba.
Really enjoying Barba!
I've come up with a technique for managing transitions that I wanted to share. Curious if anyone else has used this technique. Would really appreciate any feedback!
// All transitions are managed by a single reducer transition
Barba.Pjax.getTransition = transitionReducer
const map = {
default: fade,
home: {
single: fade,
},
single: {
home: slideUp,
},
}
// once the newContainerLoading promise resolves, we can check if a custom transition
// is defined in the map. If it's not, use the default transition defined in the map.
const transitionReducer = () => Barba.BaseTransition.extend({
start() {
// maybe show a spinner or some loading indicator here
this.newContainerLoading.then(() => {
const from = Barba.Pjax.History.prevStatus().namespace
const to = Barba.Pjax.History.currentStatus().namespace
return ((map[from] && map[from][to]) || map.default)(
this.oldContainer,
this.newContainer,
this.done.bind(this)
)
})
}
})
// then define transitions like so
function fade(oldContainer, newContainer, done) {
// call done when transition is complete
}
function slideUp(oldContainer, newContainer, done) {
// call done when transition is complete
}
from barba.
Informative and thorough response! I might suggest adding something like this to the documentation. However, this is perfect, I appreciate the help.
from barba.
Hi everyone,
I'm trying to do like @luruke with a valid()
method in each transition. I think it's very clever.
So I declare a prev
and a next
var with Barba.HistoryManager.prevStatus
and Barba.HistoryManager.currentStatus
for each in this method. So I can manage my transitions very precisely (home to page, post to page, etc).
My transition is a promise of newContainerLoading
but Barba.HistoryManager.currentStatus
stay undefined. I don't understand why.
With newContainerLoading
the new content is load and HistoryManager
has been updated, isn't it? So currentStatus
should not be undefined, right?
Thanks for the help. 😊
from barba.
Hi @19h47 , Do you have an example you can share?
Even a small one, just to make it more clear :)
Thanks
from barba.
Yes, of course.
So I have my transition.
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
},
fadeIn: function() {
},
valid: function() {
var prev = Barba.HistoryManager.prevStatus();
var next = Barba.HistoryManager.currentStatus();
console.log(prev.namespace + ' to ' + next.namespace);
return prev.namespace === 'home' && next.namespace === 'page'
}
});
And then:
Barba.Pjax.getTransition = function() {
if (FadeTransition.valid()) {
return FadeTransition;
}
};
Is my logic is correct?
from barba.
Hey @19h47,
basically the namespace is grabbed when the next paged is loaded (it's the data-namespace
on the container), so, you can't know in advance the namespace until newContainerLoading
is resolved.
Does it makes sense?
from barba.
Ah ok, I'm too fast. 😅
I have to think differently. Thank you so much for your time, and for Barba.js!
from barba.
Thank you @mikehwagz for sharing this 👍
This is indeed a good approach when need to have different animation from -> to
.
Only drawback is that you must wait the next page to be loaded to know which transition to use, but in most cases it shouldn't be a problem.
from barba.
Thanks for the feedback @luruke! You've done an excellent job with this library. Hopefully the loading isn't too much of an issue on slower connections.
from barba.
Looking back at the way how you structure your custom transitions.
_You may want to save the latest clicked element
let lastClickEl;
Barba.Dispatcher.on('linkClicked', (el) => {
lastClickEl = el;
});
then, in .getTransition, decide the transition based on this._
And then you are checking what was clicked and in your get transition you set this:
_getTransition() {
if (FromHomeSlider.valid()) {
return FromHomeSlider;
}
if (PortfolioToCaseStudy.valid()) {
return PortfolioToCaseStudy;
}
if (CaseStudyReadMore.valid()) {
return CaseStudyReadMore;
}
if (CaseStudySibling.valid()) {
return CaseStudySibling;
}
return FadeTransition;
}_
Are you running the Barba.Dispatcher.on('linkClicked', (el)... in each of the functions you have made?
from barba.
Got this working by following the above example using
const prev = Barba.HistoryManager.prevStatus();
and
const next = location.pathname.substr(1);
To get the URI, I can then check the previous and next pages to make sure the correct transition is fired.
from barba.
Why do you need the "prevStatus" for a transition that is for the next page?
from barba.
@Guaby If you only want a certain transition to occur when going from a specific page to another then you need to check what the previous page/namespace was.
That way the specific transition won't happen if you visit the page from every single other page, only the ones you choose.
from barba.
I've read all the above comments and understand that the currentStatus.namespace is yet undefined when getTransition is being called.
Still, I' confused about this:
As you can see, in the first line inside the {} brackets, the namespace is undefined, as expected. But when opening the dropdown arrow (in chrome by the way) I can see the current namespace defined.
Can someone explain me why so?
from barba.
Chrome shows the objects in the console per reference.
When you console.log
, in that precise moment the value is undefined.
Then when you expand the object you see the new namespace. That's because the object was modified
from barba.
That makes sense, thank you very much, I was thinking it might be something like that.
from barba.
Related Issues (20)
- Limit the number of prefetched links
- THREEJS meshes disappearing after barba transition HOT 1
- Barba.JS not work with GSAP Line Animation HOT 1
- Add setting to cache rendered HTML
- Footer overlapping issue on the documentation website HOT 2
- Improve documentation for WordPress HOT 2
- How to add/initialize other JS files after the page transition which is built with barba & gsap? HOT 2
- How to create transition sliding up card? HOT 1
- `RangeError` on manual hash change
- How to check for barbacontainer HOT 1
- Safari flash the leaving container HOT 6
- Add support for multiple `namespace` in `Views`
- Improve `next.container` availability
- About `View` transitions API HOT 3
- POST Form transition HOT 1
- Source map failed to load HOT 3
- Compiling error HOT 1
- Disable `prefetch` on specific links HOT 1
- Maintain element on transition HOT 1
- Typescript issue with documentation example HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barba.