Transitions from BottomBarItem

Transitions from BottomBarItem

  

In an Outsystems 10 mobile application I am unable to get the "Slide from Right" and the "Slide from Left" transitions to work. I have set the transitions on a link coming from a Bottom bar Item, to a new screen in the app.  I have previewed the app in just the web browser and through the outystems now application on my iphone.  "Slide from Top" and "Slide from Bottom" both seem to work fine.  Is this expected behavior?




Hi Jason, 

Can you please send us more information? From my side, all works as expected as you can see in the file attached. 


Regards

Once i added content I was able to see the slide transition.  I was expecting the menu header and bottom bar to also slide from the left and the right, similar to how they come in when sliding from top and bottom. Instead it appears to just fade the Title in the header instead of sliding in with the content.

Solution

Hi Jason, 

This type of transitions was designed to be used by default, but with some CSS, is it possible to achieve what you are expecting. Put the following code in your Theme Application and this should help you.


.fade-enter.fade-enter-active .bottom,
.fade-leave.fade-leave-active .bottom,
.slide-from-right-enter.slide-from-right-enter-active .bottom,
.slide-from-right-leave.slide-from-right-leave-active .bottom,
.slide-from-left-enter.slide-from-left-enter-active .bottom,
.slide-from-left-leave.slide-from-left-leave-active .bottom {
    transition: all 330ms ease-in-out;
}

.slide-from-right-enter .header,
.slide-from-left-leave.slide-from-left-leave-active .header,
.slide-from-right-enter .bottom,
.slide-from-left-leave.slide-from-left-leave-active .bottom {
    -webkit-transform: translateX(100%) translateZ(0);
            transform: translateX(100vw) translateZ(0);
}

.slide-from-left-leave.slide-from-left-leave-active .header,
.slide-from-left-leave.slide-from-left-leave-active .bottom {
    -webkit-transform: translateX(30%) translateZ(0);
            transform: translateX(30vw) translateZ(0); 
    opacity: 0;
} 

.slide-from-right-leave .header,
.slide-from-right-enter.slide-from-right-enter-active .header,
.slide-from-left-leave .header,
.slide-from-left-enter.slide-from-left-enter-active .header,
.slide-from-right-leave .bottom,
.slide-from-right-enter.slide-from-right-enter-active .bottom,
.slide-from-left-leave .bottom,
.slide-from-left-enter.slide-from-left-enter-active .bottom {
    -webkit-transform: translateX(0%) translateZ(0);
            transform: translateX(0vw) translateZ(0);
}

.slide-from-right-leave.slide-from-right-leave-active .header,
.slide-from-left-enter .header,
.slide-from-right-leave.slide-from-right-leave-active .bottom,
.slide-from-left-enter .bottom {
    -webkit-transform: translateX(-100%) translateZ(0);
            transform: translateX(-100vw) translateZ(0);
}


Regards

Solution

Thank you!