Navigation Transition Exit/Enter specific option #7700

Activity

1. bradmartin commented on Aug 20, 2019

   

   bradmartin

   on Aug 20, 2019

   Last edited by bradmartin

   ContributorAuthor

   More actions

   After thinking about this and my original idea of a new flag.

   Possibly something as simple as adding: skipCurrentModuleTransition?: boolean to the NavigationTransition interface would work.

   When this is true, the frame code can skip the setupCurrentFragment...() methods that apply the exit/reenter transitions.

   UPDATE: In trying this out, I'm not 100% certain but skipping the steps to apply a current fragment transition ends up not working through the transition logic. I'm sure there is some other stuff happening that I've not debugged yet. So perhaps, a simpler idea is to use fade when skipCurrentModuleTransition: true.? Of course, someone more familiar with the frame transitions might know why it's behaving odd when I don't apply the current frame with a transition. Ideally, if that didn't have any negative impact on the stack then it seems like a simple "win" in terms of improving the UI/UX of NS Android apps.

   I'm not sure on iOS ATM, I believe the slide transitions look and behave like they should on majority of iOS apps so this might end up being an android only transition property.
2. tsonevn

   added

   feature

   os: android

   on Aug 20, 2019
3. Greene48 commented on Dec 12, 2019

   

   Greene48

   on Dec 12, 2019

   More actions

   I'm looking to achieve the same transition. I tried to create it using a custom transition, which works decently well. I'm using Nativescript Vue, but it should be similar for other versions of Nativescript as well.

   I created the file custom-transition.android.js:

   import { Transition, AndroidTransitionType } from "tns-core-modules/ui/transition";
   import * as platform from "tns-core-modules/platform";
   import lazy from "tns-core-modules/utils/lazy";
   
   const screenWidth = lazy(() => platform.screen.mainScreen.widthPixels);
   const screenHeight = lazy(() => platform.screen.mainScreen.heightPixels);
   
   export default class CustomTransition extends Transition {
       createAndroidAnimator(transitionType) {
           const scaleValues = Array.create("float", 2);
           const alphaValues = Array.create("float", 2);
           switch (transitionType) {
               case AndroidTransitionType.exit:
                   scaleValues[0] = 0;
                   scaleValues[1] = -200;
                   alphaValues[0] = 1;
                   alphaValues[1] = 0;
                   break;
               case AndroidTransitionType.enter:
                   scaleValues[0] = screenHeight() / 2;
                   scaleValues[1] = 0;
                   alphaValues[0] = 0;
                   alphaValues[1] = 1;
                   break;
               case AndroidTransitionType.popEnter:
                   scaleValues[0] = 0;
                   scaleValues[1] = 0;
                   alphaValues[0] = 0;
                   alphaValues[1] = 1;
                   break;
               case AndroidTransitionType.popExit:
                   scaleValues[0] = 0;
                   scaleValues[1] = screenHeight();
                   alphaValues[0] = 1;
                   alphaValues[1] = 0;
                   break;
           }
           const objectAnimators = Array.create(android.animation.Animator, 2);
           objectAnimators[0] = android.animation.ObjectAnimator.ofFloat(null, "translationY", scaleValues);
           objectAnimators[1] = android.animation.ObjectAnimator.ofFloat(null, "alpha", alphaValues);
   
           const animatorSet = new android.animation.AnimatorSet();
           animatorSet.playTogether(objectAnimators);
   
           animatorSet.setDuration(300);
   
           animatorSet.setInterpolator(this.getCurve());
           return animatorSet;
       }
   }
   

   Then I added the following code to my app.js file:

   import CustomTransition from "./custom-transition"
   const customTransition = new CustomTransition()
   Vue.prototype.$customTransition = customTransition
   

   Then call the transition in a .vue component like this:

   this.$navigateTo(Item, {
       transitionAndroid: {
           instance: this.$customTransition
       }
   });
   

   Which gives the following transition:

   

   The only issue I'm having is that the AndroidTransitionType.enter always appears below the AndroidTransitionType.exit page. So unless I set alpha of the current page/fragment to 0, you don't see the new page/fragment transitioning in. Which isn't a deal breaker but a little annoying because I'd rather the header of the current page/fragment not turn white as the new page transitions in. I tried applying setZadjustment in a few different ways but couldn't get anything to work.
4. NathanWalker

   added

   animations

   frame

   on Oct 23, 2026