How to slide from bottom animate between destinations using Navigation components?

Question

Here is my code, for slide-in & slide-out animation, how to slide from the bottom animate between destinations using Navigation components?

  <action
            android:id="@+id/action_nav_intro_to_nav_permission"
            app:destination="@id/nav_permission"

            app:popUpTo="@id/nav_intro"
            app:popUpToInclusive="true"

            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right"
            />

Answer 1

Create two animation XML resources under res/anim folder:

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="400"
        android:fromYDelta="0"
        android:toYDelta="100%" />
</set>

this translates the content on the Y-axis from 0% to 100%, ie slide down to the bottom

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="400"
        android:fromYDelta="100%"
        android:toYDelta="0" />
</set>

this translates the content on the Y-axis from 100% to 0%, ie slide up from the bottom

Then modify your XML for the navigation action as follows:

    <action
        android:id="@+id/action_nav_intro_to_nav_permission"
        app:destination="@id/nav_permission"
    
        app:popUpTo="@id/nav_intro"
        app:popUpToInclusive="true"
    
        app:enterAnim="@anim/slide_up"
        app:exitAnim="@anim/slide_down"
        app:popEnterAnim="@anim/slide_up"
        app:popExitAnim="@anim/slide_down"
   />

EDIT: 5/19/2021

@Amin correctly pointed out in comments that your GIF does not show the exit animation sliding down, so please try this alternative:

app:enterAnim="@anim/slide_up"
app:exitAnim="@null"
app:popEnterAnim="@null"
app:popExitAnim="@anim/slide_down"

Answer 2

Create an anim XML and by using this simple code you can achieve the target. also areas this

Blockquote

class FragmentA : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val inflater = TransitionInflater.from(requireContext())
    exitTransition = inflater.inflateTransition(R.transition.slide_down)
}


class FragmentB : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val inflater = TransitionInflater.from(requireContext())
    enterTransition = inflater.inflateTransition(R.transition.slide_up)
}