Vue-Router - Reverse transition on navigating back - javascript

I'm trying to implement a slide transition for the <router-view> component that slides content to the left upon navigating to a different page. To make things more intuitive, I'd like to reverse the transition if the user navigates back (which is achieved by swiping to the right on mobile and MacOS already). I already found an example in the vue-router documentation here, but it only applies to routes nested deeper, eg. with an additional URI segment.
I also found several SO questions and this issue which has an example for Vue1, but I'm using Vue2 so this is not relevant anymore.
Has anyone solved this? How would I go about reversing transitions on history navigation?

Related

Doing a complex translation animation in React (Next.js) while route changes

I have been trying to do a complex (for me at least) animation in react for a week and I am still unable to do it. I have attached the ss of a minimalist demo I made up in figma because I cannot share the actual design file.
I am using Next.js and I have to trigger this animation when the route changes (which happens automatically).
I have so far been using react-spring with its useTranslate hook. With this hook, I can use a state change to trigger the animation and also unmount the component at the end of it. For me the, automatic redirect happens after a state change that is coming from the backend via a subscription. I am hoping to use that to trigger the animation.
I am logically dividing this animation into two parts:
First part is the background gradient fading out along with the list while the avatars is fading in. This happens all the same time.
The cards duplicating behind it's back and slowly translating downwards and fading out.
So far I have figured out:
How to simultaneously trigger the animations. This is easy as I can pass the same state to different useTranslate hook with the same config object and the animations can be triggered at the same time and lasted the same duration.
How to trigger the opacity animation which can fade the avatars in while fading out the list.
But I am yet to figure out how:
To fade out background like that.
Duplicate the cards one behind another and then slowly translating them down. Not sure how to target each individual cards either.
Actually chain these animations so I can trigger the second one after the first.
Has anyone ever dealt with these kind of situations? Any other option than react-spring? Is it possible or easier if I use SVGs? Any piece of advice would be great.
Link to ss

Framer Motion's AnimateSharedLayout doesn't crossfade, and how to inversely scale inner elements

I'm using React Router in my project and have a list of album cards on the "Overview" page, and the same list of album cards on the "Albums" page. The only difference is the albums page is slightly wider.
I'd like the cards to transition to their new place/size as someone changes the route, so I've wrapped my router in <AnimateSharedLayout type="crossfade"> and given each card the same layoutId.
Now, it works, but I have a couple of issues and was wondering whether they can be fixed (I'm sure I'm just overlooking something obvious).
I've put together a cut-down example here: https://codesandbox.io/s/framer-animatesharedlayout-5kdfr (if you click between "Overview" and "Albums", it should perform the transition).
Why might crossfade not be working correctly? Instead, the cards immediately jump to the end component (I guess it's ignoring my crossfade in the AnimateSharedLayout component and using switch instead? Why would it do that?)
Is there a way to have the inner components of the card somehow scale inversely? (Similar to "Correcting child components" in Matt's post at https://www.framer.com/blog/posts/magic-motion/) For example, you can see the text squishes during the transition, even though it's the same size at the start and the end.
Thanks!

How to manage scrollbars as we want

In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.

Which NavigationBar?

RN currently has 2 official and a few community developed NavigationBars.
After reading the Navigator comparison it seems that Navigator is the favoured navigation controller implementation (superseding NavigatorIOS), as it allows decoupling the bar from the navigation logic.
But which navigation bar to use with it?
To my knowledge the main contenders are:
Navigator.NavigationBar
https://github.com/Kureev/react-native-navbar.js
Both get the job done, but what are the pros/cons of using one over the other?
Cheers :)
Here is what i've come to find out after playing with the Navigator.
Kureev's react-native-navbar is good if you want to quickly implement a navigation bar that looks similar to NavigatorIOS but with more functionality. The only thing you have to watch out for is the way that he has implemented the actual navbar. You'll notice in his example that he renders the navbar above the content and wraps it in a view, which makes the navbar a "per page basis." So when you push or pop a view the nav bar will change with the view. Currenty there is an issue addressing this thought (#62)
The Navigator component is pretty simple to use. Using the prop navigationBar you can create a consistent navbar that persists on state changes. The one pain i've found, is the navigation bar gets put below the rendered content, so you'll have to use some styling to get it to the top if thats where you want it.
To Sum up:
if you want quick and easy navigation use Kureev's
If you want more flexibility and the ability to do control more of you navigation bar, create a navbar component and use Navigators navigationBar prop.
And dont underestimate the examples from the React Native Team. Navigator examples

Ember transitions in realtime

We use ember 1.8 along with https://github.com/billysbilling/ember-animated-outlet to make the transitions on the application look more like other mobile apps ,
However now we need this to work more like the "Tumblr" app where when an item on list is swiped the next view with details will slide over in realtime based on the swiping pattern ,etc that is more you swipe the more of the next view will appear and if you slide on opposite direction you stay on the same page.
Is it possible to do this in Ember or this kind of transition is not possible with our current app?
Please let me know if the question is not worded correctly.
We wanted to be sure this is achieveable in the ember before we try that route.

Categories