如何在导航动作动画中使用viewpager的片段内容

Question

尝试使用Navigation + viewpager。当您想在viewpager中单击FourthFragment中的Button时，将显示退出动画ani_exit，但将显示firstFragment（背景颜色为黑色），并且ThirdFragment（设置为其他颜色）应包含在FirstFragment中，但是为什么不显示FourthFragment，仅显示FirstFragment

ani_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillBefore="true"
    >
    <translate
        android:fromXDelta="0%"
        android:toXDelta="-100%" />
</set>

nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/firstFragment"
    >

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.phc.jetpack.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first">
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/ani_enter"
            app:exitAnim="@anim/ani_exit"
            app:popEnterAnim="@anim/ani_pop_enter"
            app:popExitAnim="@anim/ani_pop_exit" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.phc.jetpack.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second">
    </fragment>
</navigation>

FirstFragment.java

public class FirstFragment extends Fragment {

    private static final String TAG = FirstFragment.class.getSimpleName();
    @BindView(R.id.pager)
    ViewPager pager;
    View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        MethodUtil.logCurMethod(TAG);
        if (view == null) {
            view = inflater.inflate(R.layout.fragment_first, container, false);
            ButterKnife.bind(this, view);
            initView();
        }
        return view;
    }

    private void initView() {
        if (view != null) {
            int[] colorId = new int[]{android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_blue_light};
            pager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
                @Override
                public int getCount() {
                    return colorId.length;
                }

                @NonNull
                @Override
                public Fragment getItem(int position) {
                    return FourthFragment.newInstance(ResourcesCompat.getColor(getResources(), colorId[position], null));
                }
            });

        }
    }

}

fragment_first.xml

<androidx.viewpager.widget.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_dark"/>

FourthFragment.java

public class FourthFragment extends Fragment {
    public static final String ARGS_COLOR = "ARGS_COLOR";
    @BindView(R.id.layout)
    LinearLayout layout;
    @BindView(R.id.btn)
    Button btn;

    public static Fragment newInstance(int color) {
        Fragment fragment = new FourthFragment();
        Bundle bundle = new Bundle();
        bundle.putInt(ARGS_COLOR, color);
        fragment.setArguments(bundle);
        return fragment;
    }

    @SuppressLint("ValidFragment")
    private FourthFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_fourth, container, false);
        ButterKnife.bind(this, view);
        layout.setBackgroundColor(getArguments().getInt(ARGS_COLOR));
        return view;
    }

    @OnClick(R.id.btn)
    public void onViewClicked() {

        Navigation.findNavController(getParentFragment().getView()).navigate(R.id.action_firstFragment_to_secondFragment);
    }
}

fragment_fourth.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
   <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fourth"/>

</LinearLayout>

我想显示FourthFragment离开左侧，但只显示FirstFragment左侧。